适配不同机型自定义导航高度定位问题,以及屏幕上滑导航栏背景颜色实现渐变
<view class="navbarbox" style="background-color: {{navBarBackground}}; height: {{height}}rpx;">
<view class="navBar" style=" position: fixed; top: {{top}}rpx;">
内容
</view>
</view>
.navbarbox{
width: 750rpx;
position: fixed;
z-index: 999;
}
.navBar {
left: 20rpx;
z-index: 999;
color: #fff;
}
data: {
navBarBackground: 'transparent',
top: 50,
height: 187,
},
onPageScroll: function (e) {
// 获取页面滑动距离
const scrollTop = e.scrollTop;
// 根据滑动距离修改导航栏样式
if (scrollTop > 0) {
// 当滑动距离超过100时,改变导航栏背景色为白色
this.setData({
navBarBackground: 'rgba(0,0,0,.3)'
});
} else {
// 否则保持导航栏背景色为透明
this.setData({
navBarBackground: 'transparent'
});
}
},
onLoad: function () {
//获取屏幕宽度
const screenWidth = wx.getSystemInfoSync().screenWidth;
// 获取导航栏胶囊按钮信息
const menuButtonRect = wx.getMenuButtonBoundingClientRect();
console.log('导航栏胶囊按钮信息:', menuButtonRect);
// 获取导航栏胶囊按钮的高度
const menuButtonTop = menuButtonRect.top;
const menuButtonHeight = menuButtonRect.height;
console.log('导航栏胶囊按钮的高度:', menuButtonHeight);
this.setData({
top: menuButtonTop * (750 / screenWidth) + 10,
height: menuButtonTop * (750 / screenWidth) + menuButtonHeight * (750 / screenWidth) + 10
})
},