开启了自定义顶部的配置,轮播图覆盖了顶部,所以需要做一个上滑到胶囊后重新把标题重新展示出来的操作,自定义标题出现不居中情况,以下为解决后的方案,复制粘贴即可:
.
wxml:
.
<view wx:if="{{is_show_title==true}}" class="wxtitle" style="height: {{navHeight}}px;">
<view class="wxtitle_info" style="padding-top: {{statusBarHeight}}px;line-height:{{menuButtonHeight}}px;">首页</view>
</view>
.
wxss:
.
.wxtitle{
position: fixed;
z-index: 999999;
width: 100%;
background-color: white;
text-align: center;
top: 0;
left: 0;
}
.wxtitle_info{
font-size: 28rpx;
}
.
滑动事件:滑动到胶囊后把标题展示出来
.
onPageScroll (e) {
if(e.scrollTop>this.data.navTop){
this.setData({
is_show_title: true
})
}else{
this.setData({
is_show_title: false
})
}
.
计算胶囊按钮高度、状态栏高度方法
.
setNavHeight: function () {
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top, //胶囊按钮与顶部的距离
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航高度
this.setData({
menuButtonHeight:menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2,
statusBarHeight:statusBarHeight,
navHeight: navHeight,
navTop: navTop
})
},
})
}