vue-seamless-scroll实现鼠标手动滑动

引用该组件的部分就不说了，下面是使用方法和注意事项

<!-- html部分 -->
<div class="high-person-list">
   <vue-seamless-scroll
     ref="vueSeamlessScroll"
     class="scroll-wrap"
     :data="personList"
     :class-option="defaultOption"
     @mousewheel.native="handleScroll"
   >
     <div class="container">
       <!-- 这里是轮播的东西 -->
       <div class="high-person-item" v-for="(item, pIdx) in personList" :key="pIdx">
       		<!-- 。。。 -->
       </div>
     </div>
   </vue-seamless-scroll>
 </div>
 <!-- data部分 -->
 export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      personList: [],
    }
  },
  computed: {
    // 这是组件配置内容
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 940, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  watch: {
    personList: {
      handler() {
      	// 数据更改时也要加
        this.$nextTick(() => {
          this.$refs.vueSeamlessScroll.reset()
        })
      },
      immediate: true,
    },
  },
  mounted() {
    // 这里是去重新计算组件内部的高度
    this.$nextTick(() => {
      this.$refs.vueSeamlessScroll.reset()
    })
  },
  methods: {
    // 滚动代码
    handleScroll(e) {
      // 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
      // e.deltaY是滚动的距离
      this.$refs.vueSeamlessScroll.yPos = this.$refs.vueSeamlessScroll.yPos - e.deltaY
      // 如果是正数 说明是往上滚
      if (this.$refs.vueSeamlessScroll.yPos > 0) {
        this.$refs.vueSeamlessScroll.yPos = 0
        return
      }
      // 如果yPos超过内部实际高度的一半则重新到顶部滚动
      // 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
      if (Math.abs(this.$refs.vueSeamlessScroll.yPos) > this.$refs.vueSeamlessScroll.realBoxHeight / 2) {
        this.$refs.vueSeamlessScroll.yPos = 0
      }
    },
    async queryHighFrequencyPerson() {
      const res = await queryHighFrequencyPerson();
      this.personList = res.result;
    },
  },
}

上述代码可能有描述不到位的地方，大家可以实际问题中，看看打开调试工具看dom元素可能有所帮助。

总结：实际上就是在vue-seamless-scroll组件绑定mousewheel事件，然后改变内部yPos的值，做一些边界的判断即可。