首先我们的page中"navigationStyle": "custom"
"navigationStyle": "custom"
代码实现
<view class="vitenav" :style="'background-color: rgba(255, 255, 255,' + top +')'">
<!-- #ifdef MP-WEIXIN -->
<view class="status-bar" :style="'height:' + statusBarHeight + 'px'"></view>
<!-- #endif -->
<view class="title" :style="'color: rgba(255, 255, 255,' + op +')'">
<view class="back" @click="goback">
<u-icon name="arrow-left" :color="'rgba(255, 255, 255,' + op +')'" size="21"></u-icon>
</view>
标题
</view>
</view>
data() {
return {
statusBarHeight: 0,
top: 0,
}
},
onLoad() {
uni.getSystemInfo({
success: (res) => {
this.statusBarHeight = res.statusBarHeight
}
})
},
onPageScroll (res) {
// res.scrollTop 为页面滚动距离
let top = res.scrollTop
// height为状态栏高度+自定义导航栏标题内容高度(这里是44px)
let height = this.statusBarHeight + 44
// 判断滚动高度
// 如果小于顶部自定义导航的高度
if (top <= height) {
// 透明度(top) = 滚动距离/导航栏高度
// (不做操作 直接计算 this.top = top/height 也可以实现)
// 由于(滚动距离/导航栏高度)得到0-1之间小数点后n位小数
// 四舍五入后得到的只能是0/1
// 因此做如下操作
this.top = Math.round(top/height*100)/100
} else {
// 如果滚动距离大于导航高度,则透明度值为1(不透明)
this.top = 1
}
}
.vitenav {
position: fixed;
top: 0rpx;
left: 0;
right: 0;
background: #fff;
z-index: 99;
.title {
.back{
position: absolute;
left: 15rpx;
/* #ifdef H5 */
top: 30rpx;
/* #endif */
/* #ifndef H5 */
top: 20rpx;
/* #endif */
width: 50rpx;
height: 50rpx;
}
text-align: center;
position: relative;
left: 0;
top: 0;
padding: 20rpx 0;
color: #FFFFFF;
line-height: 60rpx;
}
}