由于项目需要一个功能,顶部距离小于50rpx时,导航栏透明显示;当滚动页面时,导航栏不再透明显示。
实现思路:
- 如果滑动位置距离顶部<=50的话,隐藏导航栏;
- 50 < 距离顶部距离 <= 200, 透明度依次增加,直到opacity = 1
- 大于200的话,直接设置透明度opacity = 1
具体代码
案例中用到了uview这个ui框架的u-navbar
组件,具体可去官网查看这个组件的可配置API
<template>
<view class="zeroPurchase_root">
<u-navbar
v-show="isNavbar"
:background='backgroundObj'
:is-fixed='true'
:is-back='false'
:border-bottom='false'
/>
</view>
</template>
<script>
export default {
data() {
return {
isNavbar: false, //自定义导航栏是否显示
backgroundObj: {
backgroundImage: 'url(/static/zeroPurchase/titleBg.png)',
backgroundSize: '100% 100%',
opacity: 1
},
}
},
methods: {
onPageScroll(e) {
//获取距离顶部距离
const scrollTop = e.scrollTop;
// 导航条颜色透明渐变
if (scrollTop <= 50) {
this.isNavbar = false
} else {
if( 50 < scrollTop && scrollTop <= 200 ){ //刚开始用的 50 < scrollTop <= 200 ,这种写法程序识别不了
this.backgroundObj.opacity = scrollTop / 200
}else{
this.backgroundObj.opacity = 1
}
this.isNavbar = true
}
}
}
</script>
<style lang="scss" scoped>
</style>
另外这里用到了onPageScroll
监听页面滚动的距离,他接收一个参数对象,我们才可以通过他获取页面距离做一些操作。