這篇文章給大家分享的是有關(guān)vue如何實(shí)現(xiàn)滾動(dòng)tab跟隨切換效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)專業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價(jià)格，機(jī)房位于中國電信/網(wǎng)通/移動(dòng)機(jī)房，雅安服務(wù)器托管服務(wù)有保障！

分享一個(gè)我前幾天做的移動(dòng)端 tab滾動(dòng)跟隨的例子

隨著滾動(dòng)條的滾動(dòng)，tab會(huì)對應(yīng)進(jìn)行切換

首先我們需要監(jiān)聽當(dāng)前頁面的滾動(dòng)

mounted(){
  //記錄每個(gè)內(nèi)容對用的dom數(shù)組
  this.arrDom = document.getElementsByClassName("item-content");
  window.addEventListener('scroll', this.handleScroll);
 },
 
 destroyed(){
  window.removeEventListener('scroll', this.handleScroll);
 },

我們的tab列表可以在data里面進(jìn)行自定義數(shù)組：

tabList:[{
    id:1,
    name:'詳情'
   },{
    id:2,
    name:'評論'
   },{
    id:3,
    name:'新聞'
   },{
    id:4,
    name:'關(guān)于'
   },{
    id:5,
    name:'相關(guān)'
   }],

然后我們在dom里面對應(yīng)渲染tab列表和對應(yīng)內(nèi)容,內(nèi)容可以直接關(guān)聯(lián)到tablist的item中的一個(gè)字段，也可以分開寫

  {{item.name}}