遇到個需求是做一個無縫滾動的列表,這個千辛萬苦找到了一個插件 vue-seamless-scroll，還是要記錄下來,不然下次可能還會再找溪椎。
1.安裝
npm install vue-seamless-scroll --save
2.配置
2.1全局配置
在main.js中,配置
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
3.使用
當(dāng)時找到這個但是還是有些配置不太懂 后來去npm上搜索一番普舆，看了看文檔找到了相關(guān)的參數(shù)配置
3.1參數(shù)配置
| key | description | default | val |
|---|---|---|---|
| step | 滾動速度越快越快 | 1 | Number |
| limitMoveNum | 開始無縫滾動最小數(shù)據(jù)長度 | 5 | Number |
| hoverStop | 是否啟用鼠標(biāo)hover控制 | true | Boolean |
| direction | 方向 0 往下 1 往上 2向左 3向右 | 1 | Number |
| openTouch | 移動端開啟touch滑動 | true | Boolean |
| singleHeight | 單個停止高度（默認(rèn)為零無縫）=>方向0/1 | 0 | Number |
| singleWidth | 單步運(yùn)動停止的寬度(默認(rèn)值0是無縫不停止的滾動) direction => 2/3 | 0 | Number |
| waitTime | 單步停止等待時間(默認(rèn)值1000ms) | 1000 | Number |
| switchOffset | 左右切換按鈕距離左右邊界的邊距(px) | 30 | Number |
| autoPlay | 是否自動播放開關(guān)需要設(shè)置為false | true | Boolean |
| switchSingleStep | 手動單步切換step值(px) | 134 | Number |
| switchDelay | 單步切換的動畫時間(ms) | 400 | String |
| switchDisabledClass | 不可以點(diǎn)擊狀態(tài)的switch按鈕父元素的類名 | disabled | String |
| isSingleRemUnit | singleHeight and singleWidth是否開啟rem度量 | false | Boolean |
3.2使用
<vue-seamless-scroll :data="list" :class-option="classOption" class="table-content">
<ul>
<li v-for="(item,index) in list" :key="index">
內(nèi)容
</li>
</ul>
</vue-seamless-scroll>
<script>
computed: {
classOption () {
return {
singleHeight: 57,
waitTime: 2000,
step: 0.5,
hoverStop: false
}
}
},
</script>
<style>
.table-content {
height: 570px;
overflow: hidden;
}
</style>
ok了，基本的就完善了 里面的內(nèi)容沒有放進(jìn)去,公司的業(yè)務(wù)代碼,下面給你們看看效果圖 （聲明：數(shù)據(jù)都是自己模擬的mock數(shù)據(jù)校读，跟公司數(shù)據(jù)沒有任何關(guān)系）
image.png
image.png
不會做gif圖，沒得辦法只能截圖 第一張是滾動中，第二征是正常的圖澳迫，只要大家效果實(shí)現(xiàn)出來就ok了温治，圖就撮合著看就好了。
