custom.gif
在app.json - window 中开启自定义配置
"navigationStyle" : "custom"
app.json.png
首页的代码：
custom.js
/**
* 页面的初始数据
*/
data: {
bar_Height: wx.getSystemInfoSync().statusBarHeight,
pos: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* tab选择事件
*/
tabSelect: function (e) {
this.setData({
pos: e.currentTarget.dataset.pos
})
},
custom.json
{
"enablePullDownRefresh": true
}
custom.wxml
<view class='status-bar'>
<view class='tabar' style='padding-top:{{bar_Height}}px;'>
<text class='{{pos==0?"active":""}}' bindtap='tabSelect' data-pos='0'>推荐</text>
<text class='{{pos==1?"active":""}}' bindtap='tabSelect' data-pos='1'>热门</text>
</view>
</view>
custom.wxss
.status-bar {
width: 100%;
background-color: #fdd901;
}
.tabar {
display: flex;
justify-content: center;
}
.tabar text {
padding: 25rpx 30rpx;
color: #353535;
font-size: 12pt;
}
.tabar .active {
color: #fff;
}
个人中心代码：
mine.js
/**
* 页面的初始数据
*/
data: {
bar_Height: wx.getSystemInfoSync().statusBarHeight
},
mine.wxml
<view class='tabar' style='top:{{bar_Height}}px;'>
<view>个人中心</view>
</view>
mine.wxss
.tabar {
width: 100%;
box-sizing: border-box;
position: fixed;
text-align: center;
font-size: 12pt;
color: #fff;
background-color: #6cbc72;
}
.tabar view {
padding: 25rpx 0rpx;
}
虽然自定义效果还不错，但是要注意进行微信版本的兼容问题，window.navigationStyle 只能支持 6.6.0 以上微信版本，对应基础库版本为 1.9.1。如果需要针对低版本微信进行兼容，要做好兼容性适配。
感觉有一点不好的地方是，一旦开启了自定义，每个页面都要用自定义的导航栏，这就很无奈。比较适合页面数量较少的小程序中，页面较多最好使用<template>进行统一的顶部布局。
