uniapp实现顶部导航栏背景图片渐隐渐现效果

Posted 2021-12-13 铁锤妹妹@

由于项目需要一个功能，顶部距离小于50rpx时，导航栏透明显示；当滚动页面时，导航栏不再透明显示。

实现思路：

1. 如果滑动位置距离顶部<=50的话，隐藏导航栏；
2. 50 < 距离顶部距离 <= 200, 透明度依次增加，直到opacity = 1
3. 大于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 <= 200 ){
        this.backgroundObj.opacity = scrollTop / 200
      }else{
        this.backgroundObj.opacity = 1
      }
       this.isNavbar = true
    }
}
}
</script>

<style lang="scss" scoped>
</style>

另外这里用到了onPageScroll监听页面滚动的距离，他接收一个参数对象，我们才可以通过他获取页面距离做一些操作。