vue和better-scroll实现列表左右联动效果详解

左边滚动列表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">     <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>好评率{{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>

_initScroll() {    this.menuScroll = new BScroll(this.$els.menuWrapper,{     click:true  //允许better-scroll列表上的点击事件    });    this.foodsScroll = new BScroll(this.$els.foodWrapper,{     probeType : 3  //让better-scroll监听scroll事件    });    this.foodsScroll.on('scroll',(pos) => {     this.scrollY =Math.abs(Math.round(pos.y));    })   },

//初始化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}" 就是根据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);   },