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属性

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

 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值