如图所示
右边的名字直接用 :navigationBarTitleText 属性就可以了
但是左边那种选择器的这么才能实现呢?
html:
<view class="tabs">
<view class="tab-item {{status==1?'active':''}} " bindtap="handleTab" data-status="1">我的圈子</view>
<view class="tab-item {{status==2?'active':''}} " bindtap="handleTab" data-status="2">其他圈子</view>
</view>
CSS:
.tabs {
padding:0 20rpx;
margin-top:40rpx;
width:calc( 100% - 40rpx);
height:80rpx;
}
.tab-item {
height:60rpx;
line-height:60rpx;
float:left;
position:relative;
color:#666666;
margin-right:20rpx;
}
.tab-item.active {
color:#000000;
}
.tab-item.active::after {
width:40rpx;
height:4rpx;
background:#000000;
position:absolute;
bottom:0rpx;
left:50%;
margin-left:-20rpx;
content:'';
display:block;
}
JS:
/**
* 页面的初始数据
*/
data: {
status:1//选中状态
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
handleTab(e){
this.data.status=e.currentTarget.dataset.status
this.setData({
status:this.data.status
})
},
Json:
{
"usingComponents": {},
"navigationStyle":"custom"
}
小程序只要用到自定义custom,不管是全局页面还是单页面(以上是单页面),都需要处理不同机型头部高度兼容。
在app.js中
// 获取导航高度;
wx.getSystemInfo({
success: res => {
//导航高度
this.globalData.navHeight = res.statusBarHeight * (750 / res.windowWidth) + 97;
}, fail(err) {}
});
globalData: {
navHeight: 0,
},
单页中的js调用全局导航高度,处理自定义头部导航的高度