BetterScroll实现滚动联动

一：左联右（点击左边分类，右边滚动到指定的商品模块）

实现原理：点击左边商品分类，获取下标，与右边的商品列表进行一一对应

第一步：点击分类（绑定点击事件），获取下标

<script>
    //前提条件：让滚动元素可以点击（详情看《核心滚动BetterScroll》）
    this.bs1 = new BetterScroll('.aside', {
      probeType: 3,
      click: true, //让滚动元素可以点击
    });

    methods:{
         //点击商品分类的函数
        clickCate(i){
            console.log(i);
        }
    }
</script>

第二步：给列表标题设置有规律的id

<h3 class="list-title" :id="'title'+i">{{v.name}}</h3>

第三步：滚动到指定的标签

scrollToElement(el, time, offsetX, offsetY, easing)  作用：滚动到指定的目标元素（具体查看BetterScroll官方文档API）

methods:{
    //点击商品分类的函数
    clickCate(i){
        console.log(i);
        this.bs2.scrollToElement('#title'+i, 500);
    }
}

二：右联左（滚动右边的商品列表，左边的商品分类跟着变化）

核心思想：计算出每一个标题的位置，通过滚动事件获取当前位置，再遍历位置数组，判断当前位置在哪个区间，得到对应的下标，就可以设置左边激活下标，并跳过去。  

//计算所有右边列表的位置
let arr = this.list.map((v,i)=>{
  return document.querySelector('#title'+i).offsetTop -  document.querySelector('#title0').offsetTop;
});

//滚动右边列表时左边跟着滚动
this.bs2.on('scroll', pos=>{
  let y = Math.abs(pos.y);

  for(let i=0; i<arr.length-1; i++){
    if( y>=arr[i] && y<arr[i+1] ){ //判断当前滚动值在哪个位置区间，设置左边分类项
      this.activeKey = i;
      this.bs1.scrollToElement('#cate'+i, 300);  //丝滑效果
    }
  }
});