小程序开发-自定义顶部底部导航栏和全屏导航栏
顶部导航栏
1. 设置导航栏文字
在相应界面的json中加入属性值:
"navigationBarTitleText":"自定义文字",
"navigationBarTextStyle":"white"
2. 设置导航栏颜色
在相应界面的Json 文件中加入属性、值,值只能是十六进制的颜色。
"navigationBarBackgroundColor":"十六进制颜色"
底部导航栏
1. 添加底部导航栏
在app.json中添加tabBar代码:
"tabBar":{
"selectedColor" : "#1296016",
"list":[
{
"pagePath" : "pages/index/index",
"text" : "首页",
"iconPath" : "/images/icon/home.png",
"selectedIconPath" : "/images/icon/homeSelected.png"
},
{
"pagePath" : "pages/mine/mine",
"text" : "我的",
"iconPath" : "/images/icon/mine.png",
"selectedIconPath" : "/images/icon/mineSelected.png"
}
]
selectedColor
设置的是选中之后的图标描述文字颜色iconPath
的值不能为空
2. 底部导航栏页面之间的跳转
a)“首页”和“我的”之间的跳转时使用switchTab,使用navigateTo、navigateBack和redirectTo并不起作用;
b)从首页跳到“page1”(page1不是带有底部导航栏的页面),那么在page1界面要跳回到首页的话使用redirectTo和navigateTo是没用的,使用switchTab或者navigateBack(使用navigateBack的前提是从首页跳到page1用的是navigateTo)
wx.switchTab({
url:'../page1/page1'
全屏导航栏
1. 设置全屏模式
在json文件中加 "navigation"属性,值为:" custom";
"navigationStyle": "custom"
2. 自定义导航栏
在wxml中加入代码:
<view class="customTitleBar" style="top:{{top}}px">
微信小程序
</view>
wxss中代码:
.customTitleBar {
position:fixed;/*出现滚动条的时候仍能保证标题在最上边*/
z-index:10000;/*让这个view浮在最上层*/
color:white;/*设置文字颜色*/
text-align:center;/*设置文字居中*/
width:100%;/*设置宽度为整个屏幕的宽度,配置text-align使用*/
}
js中加入
data{
top: wx.getMenuButtonBoundingClientRect().top
}