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

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

具体代码

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

 

1

<br><template><br>  <view><br>    <u-navbar <br>      v-show="isNavbar"<br>      :background='backgroundObj'<br>      :is-fixed='true'<br>      :is-back='false'<br>      :border-bottom='false'<br>    /><br>  </view><br></template><br><script><br>export default {<br>  data() {<br>    return {<br>      isNavbar: false, //自定义导航栏是否显示<br>      backgroundObj: {<br>        backgroundImage: 'url(/static/zeroPurchase/titleBg.png)',<br>        backgroundSize: '100% 100%',<br>        opacity: 1<br>    },<br>    }<br>  },<br>  methods: {<br>  onPageScroll(e) {<br>    //获取距离顶部距离<br>    const scrollTop = e.scrollTop;<br>    // 导航条颜色透明渐变<br>    if (scrollTop <= 50) {<br>      this.isNavbar = false<br>    } else {<br>      if( 50 < scrollTop <= 200 ){<br>        this.backgroundObj.opacity = scrollTop / 200<br>      }else{<br>        this.backgroundObj.opacity = 1<br>      }<br>       this.isNavbar = true<br>    }<br>}<br>}<br></script><br><style scoped><br></style>

​

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

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