vue 好用的轮播插件之一 vue-seamless-scroll

1.安装 cnpm i vue-seamless-scroll -S

2.组件调用  import vueSeamless from "vue-seamless-scroll"; （或者全局注册）

3.https://www.npmjs.com/package/vue-seamless-scroll  https://chenxuan0000.github.io/vue-seamless-scroll/index.html#/routerOne 例子

      <vueSeamless :data="testList" :class-option="defaultOption" class="seamless-warp" ref="seamless">
        <div class="scorll-content" v-for="(item,index) in testList" :key="index">
          <div>{{ index + 1 }}</div>
          <div>{{ item.xx}}</div>
          <div>{{ item.xx}}</div>
          <div>{{ item.xx}}</div>
          <div>{{ item.xx}}</div>
          <div>{{ item.xxx}}</div>
          <div>{{ item.xxx}}</div>
        </div>
      </vueSeamless>

<script>
import vueSeamless from "vue-seamless-scroll";
export default {
  components: {
    vueSeamless
  },
  props: {
  },
  data() {
    return {
　　　　testList: []
    };
  },
  computed: {
    // 公告滚动自定义
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 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)
      };
    }
  },
  mounted() {
    this._initMove();
  },
  methods: {
    _initMove() {
      this.$nextTick(() => {
        if (this.testList.length) {
          this.$refs.seamless.$refs.realBox.style.minWidth = "100%" // 窗口变化时候或者使用了flex之后造成的样式问题处理;
        }
      });
    }
  }
};
</script>

<style>
.seamless-warp {
  width: 100%;
  height: calc(100% - 672px);
  overflow: hidden;
}
</style>

 

来源：https://www.cnblogs.com/lhl66/p/12579928.html