多个产品展示一行可左右滑动，产品曝光事件触发

//productSensor.js

export default {
  data() {
    return {
      imgIndexList: [],
    };
  },
  methods: {
    debounce (fn, delay) {
      let timer;
      return function (...args) {
        clearTimeout(timer); // 清除上一次开的定时器
        timer = setTimeout(() => {
          fn.apply(this, args);
        }, delay)
      }
    },
    getScroll:debounce (function(vips, wrapperRef) {
      if (vips.length === 0) return;
      const contentBox = wrapperRef;
      const slideImgWidth = 105 + 6;
      const scrollLeft = contentBox.scrollLeft;
      const maxImg = Math.round((scrollLeft + document.documentElement.clientWidth - 24) / slideImgWidth);
      const minImg = Math.round(scrollLeft / slideImgWidth);

      for (let i = minImg; maxImg > i; i++) {
        if (!this.imgIndexList.includes(i) && vips[i]) {
          this.showTrack(i, vips);
          this.imgIndexList.push(i);
        }
      }
    }, 1000),
    showTrack(index, vipProductData) {
      console.log('VVVVVVVVVVVVVVVVV', vipProductData[index].name);
      this.$sensors.track('h5_vip_product_event', {
        product_index: index + 1,
        product_id: vipProductData[index].id,
      });
    },
    resetList() {
      this.imgIndexList=[]
    },
  },
};

<template>
  <div class="wrapper" ref="wrapper" @scroll="getScroll(vips, wrapperRef)">
    <ul class="content">
      <li class="item" v-for="(item, index) in vips" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
import productSensor from '@/mixins/productSensor'
export default {
  mixins: [productSensor],
  data () {
    return {
      vips: [],
    };
  },
  computed: {
    wrapperRef () {
      return this.$refs.wrapper;
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.resetList()
      this.getScroll(this.vips, this.wrapperRef);
    });
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  overflow-x: scroll;

  .content {
    white-space: nowrap;
    padding: 0 16px;

    .item {
      float: left;
      width: calc((100vw - 44px) / 3);
      height: 118px;
      border-radius: 20px;
      margin-right: 6px;
      box-sizing: border-box;
      background: #fcc;

      &:last-of-type {
        margin-right: 0;
      }

      &.current {
        border: 2px solid #f5b75b;
      }
    }
  }
}

.wrapper::-webkit-scrollbar {
  display: none;
}
</style>