vue實現列表無縫捲動效果

npm install vue-seamless-scroll --save

import vueSeamlessScroll from "vue-seamless-scroll";

components: { vueSeamlessScroll },

<template>
  <div class="seamlessRolling" @click="lookClick($event)">
    <vue-seamless-scroll :data="msgData" :class-option="classOption">
      <ul>
        <li v-for="(item, index) in msgData" :key="index">
          <span>{{ item.id }}</span>
          <span>{{ item.title }}</span>
          <span class="handle" :id="item.id" :data-tit="item.title">檢視</span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
// 這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）
// 例如：import 《元件名稱》 from '《元件路徑》'

import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  // import引入的元件需要注入到物件中才能使用
  components: { vueSeamlessScroll },
  data() {
    // 這裡存放資料
    return {
      msgData: [
        {
          id: 1,
          name: 1,
          title: "無縫捲動001",
        },
        {
          id: 2,
          name: 2,
          title: "無縫捲動002",
        },
        {
          id: 3,
          name: 3,
          title: "無縫捲動003",
        },
        {
          id: 4,
          name: 4,
          title: "無縫捲動004",
        },
        {
          id: 5,
          name: 5,
          title: "無縫捲動005",
        },
      ],
    };
  },
  // 計算屬性 類似於data概念
  computed: {
    classOption() {
      return {
        step: 1, // 數值越大速度捲動越快
        limitMoveNum: 2, // 開始無縫捲動的資料量 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)
      };
    },
  },
  // 監控data中的資料變化
  watch: {},
  // 方法集合
  methods: {
    lookClick(e) {
      if (e.target.className == "handle") {
        console.log(e.target.id);
        console.log(e.target.dataset.tit);
      }
    },
  },
  // 生命週期 - 建立完成（可以存取當前this範例）
  created() {},
  // 生命週期 - 掛載完成（可以存取DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命週期 - 建立之前
  beforeMount() {}, // 生命週期 - 掛載之前
  beforeUpdate() {}, // 生命週期 - 更新之前
  updated() {}, // 生命週期 - 更新之後
  beforeDestroy() {}, // 生命週期 - 銷燬之前
  destroyed() {}, // 生命週期 - 銷燬完成
  activated() {}, // 如果頁面有keep-alive快取功能，這個函數會觸發
};
</script>

<style lang='scss' >
//@import url(); 引入公共css類
</style>
<style lang='scss' scoped>
//@import url(); 引入公共css類
* {
  padding: 0;
  margin: 0;
}
.seamlessRolling {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  border: 1px solid rgb(165, 76, 76);
  overflow: hidden;
  ul,
  li {
    list-style: none;
  }
  li {
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-around;
    .handle {
      cursor: pointer;
    }
  }
}
</style>