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>
// 這里可以導(dǎo)入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）
// 例如：import 《組件名稱》 from '《組件路徑》'

import vueSeamlessScroll from "vue-seamless-scroll";
export default {
? // import引入的組件需要注入到對(duì)象中才能使用
? components: { vueSeamlessScroll },
? data() {
? ? // 這里存放數(shù)據(jù)
? ? return {
? ? ? msgData: [
? ? ? ? {
? ? ? ? ? id: 1,
? ? ? ? ? name: 1,
? ? ? ? ? title: "無(wú)縫滾動(dòng)001",
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: 2,
? ? ? ? ? name: 2,
? ? ? ? ? title: "無(wú)縫滾動(dòng)002",
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: 3,
? ? ? ? ? name: 3,
? ? ? ? ? title: "無(wú)縫滾動(dòng)003",
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: 4,
? ? ? ? ? name: 4,
? ? ? ? ? title: "無(wú)縫滾動(dòng)004",
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: 5,
? ? ? ? ? name: 5,
? ? ? ? ? title: "無(wú)縫滾動(dòng)005",
? ? ? ? },
? ? ? ],
? ? };
? },
? // 計(jì)算屬性 類似于data概念
? computed: {
? ? classOption() {
? ? ? return {
? ? ? ? step: 1, // 數(shù)值越大速度滾動(dòng)越快
? ? ? ? limitMoveNum: 2, // 開始無(wú)縫滾動(dòng)的數(shù)據(jù)量 this.dataList.length
? ? ? ? hoverStop: true, // 是否開啟鼠標(biāo)懸停stop
? ? ? ? direction: 1, // 0向下 1向上 2向左 3向右
? ? ? ? openWatch: true, // 開啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom
? ? ? ? singleHeight: 0, // 單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無(wú)縫不停止的滾動(dòng)) direction => 0/1
? ? ? ? singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無(wú)縫不停止的滾動(dòng)) direction => 2/3
? ? ? ? waitTime: 1000, // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)
? ? ? };
? ? },
? },
? // 監(jiān)控data中的數(shù)據(jù)變化
? watch: {},
? // 方法集合
? methods: {
? ? lookClick(e) {
? ? ? if (e.target.className == "handle") {
? ? ? ? console.log(e.target.id);
? ? ? ? console.log(e.target.dataset.tit);
? ? ? }
? ? },
? },
? // 生命周期 - 創(chuàng)建完成（可以訪問(wèn)當(dāng)前this實(shí)例）
? created() {},
? // 生命周期 - 掛載完成（可以訪問(wèn)DOM元素）
? mounted() {},
? beforeCreate() {}, // 生命周期 - 創(chuàng)建之前
? beforeMount() {}, // 生命周期 - 掛載之前
? beforeUpdate() {}, // 生命周期 - 更新之前
? updated() {}, // 生命周期 - 更新之后
? beforeDestroy() {}, // 生命周期 - 銷毀之前
? destroyed() {}, // 生命周期 - 銷毀完成
? activated() {}, // 如果頁(yè)面有keep-alive緩存功能，這個(gè)函數(shù)會(huì)觸發(fā)
};
</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>