https://www.jianshu.com/p/a2a7d3a9cf2b 侵刪
1、安裝vue-seamless-scroll
npm install vue-seamless-scroll --save
2、引入組件
<vue-seamless-scroll></vue-seamless-scroll> import vueSeamlessScroll from 'vue-seamless-scroll' components: { vueSeamlessScroll }, 3、配置參數
// 監聽屬性 類似於data概念 computed: { defaultOption () { return { step: 0.2, // 數值越大速度滾動越快 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) } } }, 4、完整實例代碼
<!-- 文件描述：無縫滾動組件 --> <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', components: { vueSeamlessScroll }, data() { // 這里存放數據 return { listData: [] } }, // 監聽屬性 類似於data概念 computed: { defaultOption () { return { step: 0.2, // 數值越大速度滾動越快 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) } } }, // 方法集合 methods: {}, // 監控data中的數據變化 watch: {}, // 生命周期 - 創建完成（可以訪問當前this實例） created() { }, // 生命周期 - 掛載完成（可以訪問DOM元素） mounted() { for(let i = 0 ; i < 15 ; i++){ let j = { title:'無縫滾動第幾條啊啊啊-'+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> 5、運行效果
作者：CMaggie
鏈接：https://www.jianshu.com/p/a2a7d3a9cf2b
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。