使用BetterScroll / better-scroll实现双联互动 / 左右两侧关联滑动

左侧
 		<ul class="l-item">
          <li
            :class="item.id == currentIndex ? 'active' : ''"
            v-for="item in leftData"
            :key="item.id"
            @click="onTabList(item.id)"
          >
            {{ item.name }}
          </li>
        </ul>

右侧
	<div ref="wrapper" class="list-r wapperr">
        <ul>
          <li
            class="shop-list"
            :ref="index"
            v-for="(item, index) in rightData"
            :key="index"
          >
            <h2>{{ item.name }}</h2>
            <ul class="r-content">
              <li v-for="(i, index) in item.list" :key="index">
                <img v-lazy="i.imgUrl" alt="" />
                <span>{{ i.name }}</span>
              </li>
            </ul>
          </li>
          <li class="shop-list" style="height: 308px"></li>//最后一个分类左侧实现不了双联，需要空div撑起高度
        </ul>
      </div>

实现
  data() {
    return {
      activeIndex: 0,
      leftData: [], //左侧数据
      rightData: [], //右侧数据
      //滑块配置
      options: {
        activeColor: "#b0352f",
      },
      //右侧滑块名称
      scroll: null,
      // 右侧滑动的y轴坐标（滑动过程中的实时变化）
      scrollY: 0,
      // 所有右侧分类li的top组成的数组
      tops: [],
    };
  },
  methods: {
    async getData() {
      let res = await http.$axios({
        url: "/api/goods/list",
      });
      res.forEach((element) => {
        this.leftData.push({
          id: element.id,
          name: element.name,
        });
        this.rightData.push(element.data[0]);
      });
      // 初始化滚动
      this.$nextTick(() => {
        // 监听右侧列表
        this.scroll = new BetterScroll(this.$refs.wrapper, {
          mouseWheel: true,
          click: true,
          probeType: 2,
        });
        // 给右侧列表绑定scroll监听
        this.scroll.on("scroll", (position) => {
          this.scrollY = Math.abs(position.y); //Math.abs返回一个数的绝对值
        });
        let top = 0;
        this.tops.push(top);
        // 2.搜集
        // 找到所有分类的li
        const lis = this.$refs.wrapper.getElementsByClassName("shop-list");
        // 将lis转为数组
        Array.from(lis).forEach((v) => {
          top += v.clientHeight - 30;
          this.tops.push(top);
        });
        // 给右侧列表绑定滚动结束监听,获取每次滚动结束的位置
        this.scroll.on("scrollEnd", ({ x, y }) => {
          this.scrollY = Math.abs(y);
        });
      });
    },
    //左侧点击事件
    onTabList(id) {
      //点击滑动到指定的元素块
      this.scroll.scrollToElement(this.$refs[id][0]);//立即滑动
      // this.scroll.scrollTo(0, -this.tops[id], 300);//0.3秒实现滑动
    },
  },
  computed: {
    // 计算当前分类的下标
    currentIndex() {
      //  得到条件数据
      const { scrollY, tops } = this;
      // 根据条件计算产出一个结果
      //findIndex() 方法返回数组中通过测试的第一个元素的索引（作为函数提供）。
      const index = tops.findIndex((top, index) => {
        return scrollY >= top && scrollY < tops[index + 1];
      });
      // 返会结果
      return index;
    },
  },
  mounted() {
    this.getData();
  },

标签：BetterScroll,top,tops,scrollY,better,右侧,scroll,name
来源： https://www.cnblogs.com/gyh907368/p/16696293.html