开启了自定义顶部的配置,轮播图覆盖了顶部,所以需要做一个上滑到胶囊后重新把标题重新展示出来的操作,自定义标题出现不居中情况,以下为解决后的方案,复制粘贴即可:
.
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;
}
.
滑动事件:滑动到胶囊后把标题展示出来
.文章来源:https://www.toymoban.com/news/detail-581769.html
onPageScroll (e) {
if(e.scrollTop>this.data.navTop){
this.setData({
is_show_title: true
})
}else{
this.setData({
is_show_title: false
})
}
.
计算胶囊按钮高度、状态栏高度方法
.文章来源地址https://www.toymoban.com/news/detail-581769.html
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
})
},
})
}
到了这里,关于微信小程序自定义顶部状态栏滑动显示标题居中的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!