短视频直播源码，实现顶部导航栏背景图片渐隐渐现效果

短视频直播源码，实现顶部导航栏背景图片渐隐渐现效果

具体代码

案例中用到了uview这个ui框架的u-navbar组件，具体可去官网查看这个组件的可配置API

 

<template>
  <view>
    <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 scoped>
</style>

​

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

以上就是 短视频直播源码，实现顶部导航栏背景图片渐隐渐现效果，更多内容欢迎关注之后的文章