記vue下懸浮貼合頂部實現

紅茶配綠茶發表於2019-01-04
Vue

我的github地址

 Aim：實現移動端滑到某一個位置實現貼合導航條效果。

效果圖如下：

 記vue下懸浮貼合頂部實現

方案：

1.監聽滾動條移動距離，當達到觸發距離，將tab欄fixed。

2.定時器實時監聽tab欄距離頂部距離。

3.只適配移動端下的touchmove事件，觸發判斷tab距離頂部距離。


實現：

   嘗試了監聽scroll 監聽 某個函式 如下，無效果，懷疑是層級dom定位。

且監聽成功距離一直為0.

提供程式碼記錄：

mounted(){
    this.$refs.content.addEventListener('scroll',this.handleScroll,true)
},
methods:{
    handleScroll(e){
        console.log(e)
    }
}複製程式碼


方案二：

 這是最後才考慮的一種，通過定時器監聽，效能太差。因為方案三實現，沒做嘗試。


方案三：

created(){
  this.$nextTick(()=>{
    // document.querySelectorAll('.vue-slider-piecewise-dot').style.borderRadius = 0;
    [25,50,75].forEach((v,k)=>{
       document.querySelectorAll('.vue-slider-piecewise-item')[v].style.zIndex=3;
       document.querySelectorAll('.vue-slider-piecewise-dot')[v].style.background = 'rgb(229, 235, 245)'
       document.querySelectorAll('.vue-slider-piecewise-dot')[v].style.width = '15px'
       document.querySelectorAll('.vue-slider-piecewise-dot')[v].style.height = '15px'
       document.querySelectorAll('.vue-slider-piecewise-dot')[v].style.borderRadius = '15px'
    })
 // 實現貼合監聽
    this.box = this.$refs.content;  // box是貼合的導航條
    document.querySelector('#gemtrans').addEventListener('touchmove',() => { // 監聽整個單頁
      console.log(this.box.getBoundingClientRect().top)
      let top = this.box.getBoundingClientRect().top; // 獲取頂部距離
      if(top<=48){
        document.querySelector('.v-tabs__bar').style.position = 'fixed'
        document.querySelector('.v-tabs__bar').style.top= '49px'
        document.querySelector('.v-tabs__bar').style.width= '100%'
        document.querySelector('.v-tabs__bar').style.zIndex= 3
      }else {
        document.querySelector('.v-tabs__bar').style.position = 'relative'
        document.querySelector('.v-tabs__bar').style.top= 'initial'
        document.querySelector('.v-tabs__bar').style.width= 'initial'
        document.querySelector('.v-tabs__bar').style.zIndex= 'initial'
      }
    })
    
  })

},複製程式碼


網上大多是方案一，或者採用外掛，但因為專案佈局的原因不是很通用，採用方案三，簡單實現效果也不錯了~




相關文章