短視訊直播原始碼，實現頂部導航欄背景圖片漸隱漸現效果

短視訊直播原始碼，實現頂部導航欄背景圖片漸隱漸現效果

具體程式碼

案例中用到了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監聽頁面滾動的距離，他接收一個引數物件，我們才可以通過他獲取頁面距離做一些操作。

以上就是 短視訊直播原始碼，實現頂部導航欄背景圖片漸隱漸現效果，更多內容歡迎關注之後的文章