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

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以后可以在微信小程序开发者中如图的位置进入。同时在小程序的下边还可以看到传递的参数。

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

 

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