您好,登錄后才能下訂單哦!
這篇文章主要介紹了基于vue-seamless-scroll怎么實現(xiàn)無縫滾動效果的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇基于vue-seamless-scroll怎么實現(xiàn)無縫滾動效果文章都會有所收獲,下面我們一起來看看吧。
1、安裝vue-seamless-scroll
npm install vue-seamless-scroll --save
2、引入組件
全局引入在main.js中添加
import scroll from 'vue-seamless-scroll' Vue.use(scroll)
組件局部引入
<vue-seamless-scroll></vue-seamless-scroll> import vueSeamlessScroll from 'vue-seamless-scroll' components: { vueSeamlessScroll },
3、配置參數(shù)
// 監(jiān)聽屬性 類似于data概念 computed: { defaultOption () { return { step: 0.2, // 數(shù)值越大速度滾動越快 limitMoveNum: 2, // 開始無縫滾動的數(shù)據(jù)量 this.dataList.length hoverStop: true, // 是否開啟鼠標(biāo)懸停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新dom singleHeight: 0, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1 singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3 waitTime: 1000 // 單步運動停止的時間(默認值1000ms) } } },
4、完整實例代碼
<template> <div class="" > <div class="page-example3" > <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ù)值越大速度滾動越快 limitMoveNum: 2, // 開始無縫滾動的數(shù)據(jù)量 this.dataList.length hoverStop: true, // 是否開啟鼠標(biāo)懸停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新dom singleHeight: 0, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1 singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3 waitTime: 1000 // 單步運動停止的時間(默認值1000ms) } } }, // 方法集合 methods: {}, // 監(jiān)控data中的數(shù)據(jù)變化 watch: {}, // 生命周期 - 創(chuàng)建完成(可以訪問當(dāng)前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>
關(guān)于“基于vue-seamless-scroll怎么實現(xiàn)無縫滾動效果”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“基于vue-seamless-scroll怎么實現(xiàn)無縫滾動效果”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。