欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

uni-app里的pages.json页面配置

程序员文章站 2022-06-25 11:54:24
1.globalstyle是全局配置。pages数组里是单个页面的配置。页面级的配置会将全局覆盖掉。所以,在globalstyle中的navigatorbarTitle会被pages数组里的index第一页的navigatorTitle覆盖,如果要在globalstyle设置的话就要把pages中的设置删掉。2.是否开启下拉刷新,globalStyle中的属性enablePullDownRefresh。设置布尔值。enablePullDownRefresh=true。3.globalSty....

1.globalstyle是全局配置。pages数组里是单个页面的配置。

 页面级的配置会将全局覆盖掉。所以,在globalstyle中的navigatorbarTitle会被pages数组里的index第一页的navigatorTitle覆盖,如果要在globalstyle设置的话就要把pages中的设置删掉。

2.是否开启下拉刷新,globalStyle中的属性enablePullDownRefresh。

设置布尔值。enablePullDownRefresh=true。

3.globalStyle中的属性背景色backgroundColor。

背景色平时是看不到的,往下拉的时候才能看到刷新的地方露出来。

4.globalStyle中的属性背景字色backgroundTextStyle。

5.globalStyle中的下拉触底触发事件的距离onReachBottomDistance。

6.新建页面,配置页面。

在项目下面的文件夹pages里边新建页面。新建文件夹message,文件下新建页面message.vue。

<template>
    <view>  hellow uniapp</view>
</template>

在pages.json下面的页面配置数组pages里边新建一个页面

{
  "path": "pages/message/message",
  "style": {
				
  }
}

要想显示这个页面,把这个放到第一个。

7.页面配置中的H5单独样式设置。

{
  "path": "pages/message/message",
  "style": {
		“h5”:{
       
        }		
  }
}

8.设置tabBar。

tabBar和globalStyle一个等级的,是一个对象。在tabBar对象里边有一个list数组,数组里包含对象。这里注意list要至少包含两项。

 (1)在list数组的对象中填内容。

“tabBar”:{
    “list”:[
          {
             "text":"首页",
             “pagePath”:“pages/page/index”,
             "iconPath":........,
             "selectedIconPath":.........//选中的样式
          },
         {
             "text":"首页",
             “pagePath”:“pages/page/index”,
             "iconPath":........,
             "selectedIconPath":.........//选中的样式
          }
     ]
}

 (2)tabBar的属性color可以设置未选中的字颜色。selectedColor可以设置选中字的颜色。

“tabBar”:{
  
  “color”:“”,  
  “list”:[
          {
             "text":"首页",
             “pagePath”:“pages/page/index”,
             "iconPath":........,
             "selectedIconPath":.........//选中的样式
          },
         {
             "text":"首页",
             “pagePath”:“pages/page/index”,
             "iconPath":........,
             "selectedIconPath":.........//选中的样式
          }
     ]
}

(3)backgroundColor设置背景色。

(4)position可以设置tabbar的位置。默认值是bottom;可以设置为top,但是只在小程序中有作用,到上边去,在浏览器中top没反应。

(5)属性condition。

开发阶段使用,在界面上看不到进入的按钮。在浏览器上可以通过输入页面的地址进入;但是在小程序中,不能输入地址进入,ccondition就是解决这个的。设置condition以后可以在微信小程序开发者中如图的位置进入。同时在小程序的下边还可以看到传递的参数。

uni-app里的pages.json页面配置

	"condition" : { //模式配置,仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项),
		"list": [
			{
				"name": "详情页", //模式名称
				"path": "pages/detail/detail", //启动页面,必选
				"query": "id=10" //启动参数,在页面的onLoad函数里面得到
			}
		]
	},

 

本文地址:https://blog.csdn.net/wu9caiji/article/details/107508839