本篇文章給大家分享的是有關怎么在vue中使用better-scroll實現(xiàn)一個列表左右聯(lián)動效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

公司主營業(yè)務：成都做網(wǎng)站、網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出解放免費做網(wǎng)站回饋大家。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結構的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

一.實現(xiàn)思路

1. (1)實現(xiàn)上是左右分別一個better-scroll列表

2. (2)利用計算右側列表每一個大區(qū)塊的高度來計算左側的位置

二.實現(xiàn)

1.實現(xiàn)左右兩個better-scroll

(1)dom結構(better-scroll要求,會把最外層dom的第一個子元素作為要滾動的區(qū)域)

左邊滾動列表dom
 <div class="menu-wrapper" v-el:menu-wrapper>
   <ul>
    <li v-for="item in goods" class="menu-item"
      :class="{'current':currentIndex === $index}"
      @click="selectMenu($index,$event)">
     <span class="text border-1px">
      <span v-show="item.type > 0" class="icon"
       :class="classMap[item.type]"></span>{{item.name}}
     </span>
    </li>
   </ul>
  </div>

右邊滾動列表dom
<div class="food-wrapper" v-el:food-wrapper>
   <ul>
    <li v-for="item in goods" class="food-list food-list-hook">
     <h2 class="title">{{item.name}}</h2>
     <ul>
      <li v-for="food in item.foods" class="food-item border-1px">
       <div class="icon">
        <img width="57" height="57" :src="food.icon">
       </div>
       <div class="content">
        <h3 class="name">{{food.name}}</h3>
        <p class="desc">{{food.description}}</p>
        <div class="extra">
         <span class="count">月售{{food.sellCount}}份</span>
         <span>好評率{{food.rating}}%</span>
         <div class="price">
          <span class="now">&yen;{{food.price}}</span>
          <span class="old" v-show="food.oldPrice">&yen;{{food.oldPrice}}</span>
         </div>
        </div>
       </div>
      </li>
     </ul>
    </li>
   </ul>
  </div>

在數(shù)據(jù)請求完成后的$nextTick中初始化better-scroll,就能實現(xiàn)兩個列表分別能滾動,至于聯(lián)動,要后面自己做

_initScroll() {
    this.menuScroll = new BScroll(this.$els.menuWrapper,{
     click:true  //允許better-scroll列表上的點擊事件
    });
    this.foodsScroll = new BScroll(this.$els.foodWrapper,{
     probeType : 3  //讓better-scroll監(jiān)聽scroll事件
    });
    this.foodsScroll.on('scroll',(pos) => {
     this.scrollY =Math.abs(Math.round(pos.y));
    })
   },

2.實現(xiàn)聯(lián)動效果

(1)具體的聯(lián)動實現(xiàn)思路

1. 在渲染完成后($nextTick內),初始化better-scroll,并在初始化函數(shù)內添加右側列表的scroll監(jiān)聽事件,并記錄scrollY值到,存入vue的data中

2. 在渲染完成后($nextTick內),計算右側列表的每一個大區(qū)塊的高度,并累加,存入數(shù)組listHeight

3. 因為scrollY值在滾動中總是不斷變化的,所以在computed中計算出currentIndex,當前滾動區(qū)域是哪一個大區(qū)塊,也就是listHeight數(shù)組的下標

4. 在dom中根據(jù)currentIndex應用左側列表被點中的樣式

5. 在左側列表某一項被點中的時候,右側列表滑動到某一個大塊區(qū)域,

//初始化better-scroll
_initScroll() {
    this.menuScroll = new BScroll(this.$els.menuWrapper,{
     click:true
    });
    this.foodsScroll = new BScroll(this.$els.foodWrapper,{
     probeType : 3
    });
    this.foodsScroll.on('scroll',(pos) => {
     this.scrollY =Math.abs(Math.round(pos.y));
    })
   },

_calculateHeight() {
    let foodList = this.$els.foodWrapper.getElementsByClassName("food-list-hook");
    let height = 0;
    this.listHeight.push(height);
    for(let i=0;i<foodList.length;i++) {
     let item = foodList[i];
     height += item.clientHeight;
     this.listHeight.push(height);
    }
   }

computed: {
   currentIndex() {
    for(let i=0;i< this.listHeight.length;i++) {
     let height1 = this.listHeight[i];
     let height2 = this.listHeight[i+1];
     if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
      return i;
     }
    }
    return 0;
   }
  },

<div class="menu-wrapper" v-el:menu-wrapper>
   <ul>
    <!-- :class="{'current':currentIndex === $index}" 就是根據(jù)currentIndex應用左側列表被點中的樣式 -->
    <li v-for="item in goods" class="menu-item"
      :class="{'current':currentIndex === $index}"
      @click="selectMenu($index,$event)">
     <span class="text border-1px">
      <span v-show="item.type > 0" class="icon"
       :class="classMap[item.type]"></span>{{item.name}}
     </span>
    </li>
   </ul>
  </div>

//被點擊事件
//dom
<div class="menu-wrapper" v-el:menu-wrapper>
   <ul>
    <!-- @click="selectMenu($index,$event)" 就是點擊事件 -->
    <li v-for="item in goods" class="menu-item"
      :class="{'current':currentIndex === $index}"
      @click="selectMenu($index,$event)">
     <span class="text border-1px">
      <span v-show="item.type > 0" class="icon"
       :class="classMap[item.type]"></span>{{item.name}}
     </span>
    </li>
   </ul>
  </div>
//js  
selectMenu(index,event) {
    if(!event._constructed) {
     return ;
    }
    let foodList = this.$els.foodWrapper.getElementsByClassName("food-list-hook");
    let el = foodList[index];
    this.foodsScroll.scrollToElement(el,300);
   },

以上就是怎么在vue中使用better-scroll實現(xiàn)一個列表左右聯(lián)動效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞標題：怎么在vue中使用better-scroll實現(xiàn)一個列表左右聯(lián)動效果-創(chuàng)新互聯(lián)
瀏覽路徑：http://chinadenli.net/article40/diigho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、虛擬主機、外貿網(wǎng)站建設、微信小程序、微信公眾號、關鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)