npm install vue-seamless-scroll --save　

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

<vue-seamless-scroll></vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
? ? ? ? vueSeamlessScroll
},

// 監(jiān)聽屬性 類似于data概念
computed: {
? ? ? ? defaultOption () {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? step: 0.2, // 數(shù)值越大速度滾動(dòng)越快
? ? ? ? ? ? ? ? ? ? limitMoveNum: 2, // 開始無縫滾動(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是無縫不停止的滾動(dòng)) direction => 0/1
? ? ? ? ? ? ? ? ? ? singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3
? ? ? ? ? ? ? ? ? ? waitTime: 1000 // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? },　

<template>
? ? <div class="" style="padding: 50px;">
? ? ? ? <div class="page-example3" style="">
? ? ? ? ? ? <vue-seamless-scroll :data="listData" :class-option="defaultOption" >
? ? ? ? ? ? ? ? <ul class="ul-scoll">
? ? ? ? ? ? ? ? ? ? <li v-for="(item, index) in listData" :key='index'>
? ? ? ? ? ? ? ? ? ? ? ? <span class="title">{{item.title}}：</span><span class="date">{{item.time}}</span>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </vue-seamless-scroll>
? ? ? ? </div>
? ? </div>
</template>
?
<script>
? ? import vueSeamlessScroll from 'vue-seamless-scroll'
? ? export default {
? ? ? ? name: 'Example3',
? ? ? ? data() {
? ? ? ? ? ? // 這里存放數(shù)據(jù)
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? listData: []
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? // import引入的組件需要注入到對象中才能使用
? ? ? ? components: {
? ? ? ? ? ? vueSeamlessScroll
? ? ? ? },
? ? ? ? // 監(jiān)聽屬性 類似于data概念
? ? ? ? computed: {
? ? ? ? ? ? defaultOption () {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? step: 1, // 數(shù)值越大速度滾動(dòng)越快
? ? ? ? ? ? ? ? ? ? limitMoveNum: 2, // 開始無縫滾動(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是無縫不停止的滾動(dòng)) direction => 0/1
? ? ? ? ? ? ? ? ? ? singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3
? ? ? ? ? ? ? ? ? ? waitTime: 1000 // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
?
? ? ? ? },
? ? ? ? // 方法集合
? ? ? ? methods: {},
? ? ? ? // 監(jiān)控data中的數(shù)據(jù)變化
? ? ? ? watch: {},
? ? ? ? // 生命周期 - 創(chuàng)建完成（可以訪問當(dāng)前this實(shí)例）
? ? ? ? created() {
?
? ? ? ? },
? ? ? ? // 生命周期 - 掛載完成（可以訪問DOM元素）
? ? ? ? mounted() {
? ? ? ? ? ? for(let i = 0 ; i < 15 ; i++){
? ? ? ? ? ? ? ? let j = {
? ? ? ? ? ? ? ? ? ? title:'無縫滾動(dòng)第幾條啊啊啊-'+i,
? ? ? ? ? ? ? ? ? ? time: '2020-04-10'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.listData.push(j)
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>
?
<style scoped lang="scss">
? ? //@import url(); 引入公共css類
? ? .page-example3{
? ? ? ? width: 400px;
? ? ? ? height: 200px;
? ? ? ? overflow: hidden;
? ? ? ? border: 1px solid #283dff;
? ? ? ? .ul-scoll{
? ? ? ? ? ? li{
? ? ? ? ? ? ? ? margin: 6px;
? ? ? ? ? ? ? ? padding: 5px;
? ? ? ? ? ? ? ? background: rgba(198, 142, 226, 0.4);
? ? ? ? ? ? }
? ? ? ? }
? ? }
</style>