1.安裝 cnpm i vue-seamless-scroll -S
2.組件調用importvueSeamlessfrom"vue-seamless-scroll"; （或者全局注冊）
3.https://www.npmjs.com/package/vue-seamless-scrollhttps://chenxuan0000.github.io/vue-seamless-scroll/index.html例子

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

總結

以上是生活随笔為你收集整理的vue 好用的轮播插件之一 vue-seamless-scroll的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。