BetterScroll实现滚动联动

摆烂程序鱼

已于 2023-06-12 15:39:29 修改

阅读量514

点赞数

CC 4.0 BY-SA版权

文章标签：数学建模

于 2023-06-12 13:15:44 首次发布

本文链接：https://blog.youkuaiyun.com/A_man_of_ideas/article/details/131166215

文章介绍了如何使用BetterScroll库来实现页面的左右联动滚动效果。具体包括点击左边分类使右边滚动到对应商品模块，以及右边滚动时更新左边分类的选中状态。主要步骤涉及绑定点击事件、设置元素ID和监听滚动事件来计算及切换选中分类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

<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);  //丝滑效果
    }
  }
});