一.實(shí)現(xiàn)思路

(1)實(shí)現(xiàn)上是左右分別一個(gè)better-scroll列表 (2)利用計(jì)算右側(cè)列表每一個(gè)大區(qū)塊的高度來(lái)計(jì)算左側(cè)的位置

二.實(shí)現(xiàn)

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

(1)dom結(jié)構(gòu)(better-scroll要求,會(huì)把最外層dom的第一個(gè)子元素作為要滾動(dòng)的區(qū)域)

左邊滾動(dòng)列表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>右邊滾動(dòng)列表dom<div class="food-wrapper" v-el:food-wrapper>   <ul>    <li v-for="item in goods" class="food-list food-list-hook">     <h1 class="title">{{item.name}}</h1>     <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">        <h2 class="name">{{food.name}}</h2>        <p class="desc">{{food.description}}</p>        <div class="extra">         <span class="count">月售{{food.sellCount}}份</span>         <span>好評(píng)率{{food.rating}}%</span>         <div class="price">          <span class="now">¥{{food.price}}</span>          <span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>         </div>        </div>       </div>      </li>     </ul>    </li>   </ul>  </div>

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

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

2.實(shí)現(xiàn)聯(lián)動(dòng)效果

(1)具體的聯(lián)動(dòng)實(shí)現(xiàn)思路

在渲染完成后($nextTick內(nèi)),初始化better-scroll,并在初始化函數(shù)內(nèi)添加右側(cè)列表的scroll監(jiān)聽(tīng)事件,并記錄scrollY值到,存入vue的data中 在渲染完成后($nextTick內(nèi)),計(jì)算右側(cè)列表的每一個(gè)大區(qū)塊的高度,并累加,存入數(shù)組listHeight 因?yàn)閟crollY值在滾動(dòng)中總是不斷變化的,所以在computed中計(jì)算出currentIndex,當(dāng)前滾動(dòng)區(qū)域是哪一個(gè)大區(qū)塊,也就是listHeight數(shù)組的下標(biāo) 在dom中根據(jù)currentIndex應(yīng)用左側(cè)列表被點(diǎn)中的樣式 在左側(cè)列表某一項(xiàng)被點(diǎn)中的時(shí)候,右側(cè)列表滑動(dòng)到某一個(gè)大塊區(qū)域,