标签：BetterScroll top tops scrollY better 右侧 scroll name

左侧
 		<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。