vue 内容滚动方案

vue3-seamless-scroll

vue-seamless-scroll

vue-seamless-scroll使用示例：

<template>
  <vue-seamless-scroll :data="listData" :class-option="defaultOption" class="scroll-box">
    <slot ></slot>
  </vue-seamless-scroll>
</template>

<script>
import  VueSeamlessScroll  from "vue-seamless-scroll/src";
export default {
  name: "BaseScroll",
  components: {
    VueSeamlessScroll,
  },
  props: {
    listData: {
      type: Array,
      default: () => [],
    },
    limitMoveNum: {
      type: Number,
      default: 4,
    },
  },
  data () {
    return {};
  },
  computed: {
    defaultOption () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: this.limitMoveNum, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created () {},
  mounted () {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.scroll-box {
  height: 100%;
  overflow: hidden;
}
</style>