better-scroll实现列表联动（移动端）

在移动端手机滑动浏览列表是没有滚动条的，那么如何实现没有滚动条又能够滚动呢？

这时候会用到一个常用的插件：better-scroll，利用它来实现移动端的滚动。其原理是利用translate来实现滚动，看下调试：
这个div是需要滚动的列表的父元素，transition-timing-function是为了让translate这个过渡效果更像原生scroll。

使用这个组件你需要有特定的结构，借一张图：
wrpper有固定高度content区超出隐藏；

使用时首先引入better-scroll插件：

import Better from 'better-scroll

传入dom节点对象：

new Better(wrpper)

wrpper节点对象可以是自己找到的对象，赋值给一个变量并传入，也可以传入节点的class名或者id它会自动调用querySelector方法去找节点，还可以通过$refs来查找。
给节点设置ref

传入：

new Better(this.$refs.list)

这样改wrpper内部的content区就可以实现滚动了；
然后来看看这种效果：
左右两个列表，左边点击右边跳到相应位置，右边滚动左边相应位置也高亮显示；这就是典型的列表联动。
我们将它分解一下，先实现左联右：
用到better-scroll中的 scrollToElement(el,time,offsetX,offsetY,easing) 很简单的方法拿来即用
1、在需要跳转到的区块上添加ref属性用于标识

1        <div v-for="(it,index) in goods" :key="index" ref="good">
 2         <p class="title">
 3           {
  
  {it.name}}
 4         </p>
 5         <ul>
 6           <li  v-for="(item,index) in it.foods" :key="index" class="list " >
 7             <div class="list_item flex" :class="index===it.foods.length-1?'last':''">
 8               <p @click="getDetails(item)"><img :src="item.icon" alt=""></p>
 9               <div>
10                 <p class="name">{
  
  {item.name}}</p>
11                 <p class="des">{
  
  {item.description}}</p>
12                 <p class="sale">月售{
  
  {item.sellCount}}份<span>好评率{
  
  {item.rating}}%</span></p>
13                 <p class="price">￥{
  
  {item.price}}</p>
14                 <div class="add"><add :food="item"></add></div>
15               </div>
16             </div>
17           </li>
18         </ul>
19       </div>

2、定义方法跳转到相应位置

1methods: {
2    change (index) {
3      this.actli = index
4      this.rgt.scrollToElement(this.$refs.good[index], 100, 0, 0)
5    },
6}

3、左列表点击调用

1     <aside ref="l_list">
 2        <ul>
 3          <li ref="l_item" :class="{'act':index === actli}" 
 4		@click="change(index)" v-for="(item,index) in goods" :key="index">
 5             <p>
 6               {
  
  {item.name}}
 7             </p>
 8           </li>
 9        </ul>
10    </aside>

记住左侧滚动栏的better-scroll对象要开启点击事件

1      this.left = new Better(this.$refs.l_list, {
2        click: true //开启点击事件
3      })

然后来实现：右联左
右边在滚动时我们需要知道它滚动了多少距离，滚动到了哪里，（右边属于列表套列表，大列表是分类，小列表是具体商品）
滚动的距离可以通过better-scroll对象的scroll事件的回调函数的参数取得；