1. 改变顶部导航样式
如果要改变某页面顶部导航样式,要在当前页面的json文件中修改,例如,要修改index页面的顶部导航,则在index.json中设置
{
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "black",
"navigationBarTextStyle": "#fff"
}
如果要修改全部页面的顶部导航,则要在app.json中修改
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
如果在index.json中也设置了顶部导航,则优先级别是index.json,app.json里面设置顶部导航是默认样式
index页面设置顶部导航,
底部导航栏切换
在app.json中添加:
"tabBar": {
"color": "#000",
"selectedColor": "#1296db",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/1-1.png",
"iconPath": "images/1.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "images/1-1.png",
"iconPath": "images/1.png",
"pagePath": "pages/logs/logs",
"text": "日志"
},
{
"selectedIconPath": "images/1-1.png",
"iconPath": "images/1.png",
"pagePath": "pages/test/test",
"text": "测试"
}
]
}
selectedIconPath为选中时底下图标,iconPath为未选中底下图标,pagePath为点击时切换页面路径,text为顶部文字内容,color为底部文字颜色,selectedColor文字选中颜色,注意:底部导航切换按钮不能超过五个
这里要注意一点,当你的页面路径已经弄成底部导航切换时,其他页面要进入此页面路径切换代码就不能用普通的切换了,正确代码如下:
在js中:
wx.switchTab({
url: 'pages/test/test',
})
或者在wxml中:
<navigator url="/pages/index/index" open-type="switchTab">跳转按钮</navigator>
以上两个是等价的
*.json文件是当前页面的配置文件。配置当前页面的窗口背景色,导航条样式,默认标题等,需要时创建不需要千万不要创建,这里我发现一个bug,就是如果创建了这个配置文件,但是配置文件中没有任何内容,那么页面渲染的时候什么也显示不出来,所以如果创建了这个文件,那么就必须在这个文件里写点什么即使写“{}”也行,要不然就不要创建
|