前景:uni自带的导航栏有时候并满足不了我们的业务需求,这个时候需要用到自定义导航组件即navbar;
需求:导航栏透明背景,并且当页面滑动的时候,逐渐实现背景颜色为白色
代码:
html代码:给导航栏设置style
:style="{'background-color':`rgba(255,255,255,${opacity})`}"
示例:
<view class="recharge-nav-bar" :style="{'background-color':`rgba(255,255,255,${opacity})`}">
<text class="back bg-icon bg-icon-return" @click="goBack"></text>
<text class="nav-title">历史记录</text>
</view>
js部分:
data(){
return {
opacity: 0,
}
},
onPageScroll(e) {
if (e.scrollTop <= 44) {
this.opacity = e.scrollTop / 44 * 1
} else if (e.scrollTop > 44) {
this.opacity = 1
}
},