需求描述
系統(tǒng)中展示進行中任務(wù)列表，默認展示5條記錄驱还，超出5條記錄后列表自動滾動展示。
插件安裝及使用
vue-seamless-scroll 基于vue.js的無縫滾動
- 安裝：
npm install vue-seamless-scroll --save
yarn add vue-seamless-scroll
- 系統(tǒng)引用
全局注冊main.js
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
單個注冊.vue
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
vueSeamlessScroll
}
}
- 代碼實現(xiàn)
<div class="title-text">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th>任務(wù)名稱</th>
<th>執(zhí)行人</th>
<th>當(dāng)前進度</th>
</tr>
</table>
</div>
<div v-if="list.length" @click="showInfo" class="content">
<vue-seamless-scroll :key="timeKey" :data="list" :class-option="scrollOption" class="info">
<table border="0" cellpadding="0" cellspacing="0">
<tr v-for="(item, index) in list" :key="index" :data-index="index">
<td>{{item.title}}</td>
<td>{{item.name}}</td>
<td>{{item.progress}}</td>
</tr>
</table>
</vue-seamless-scroll>
</div>
<div v-else class="empty">暫無數(shù)據(jù)</div>
- 部分配置
computed: {
scrollOption () {
return {
step: 0.5, // 數(shù)值越大速度滾動越快
limitMoveNum: 6, // 開始無縫滾動的數(shù)據(jù)量 this.list.length+1
hoverStop: true, // 是否開啟鼠標懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新dom
singleHeight: 21, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1
singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3
waitTime: 2500 // 單步運動停止的時間(默認值1000ms)
}
}
},
注意事項
- vue-seamless-scroll
滾動數(shù)據(jù)data必須設(shè)置闷沥，否則將不會滾動。樣式需要設(shè)置高度與overflow: hidden; - 單步運動停止的高度
單步運動停止的高度應(yīng)該為單行數(shù)據(jù)高度的整數(shù)倍舆逃，在文章示例中就是<tr>高度的整數(shù)倍。當(dāng)設(shè)置為整數(shù)倍時路狮，列表文字都可以清楚展示看做為無縫滾動，否則就會出現(xiàn)文字展示不全的問題蔚约。 - 單行數(shù)據(jù)添加點擊事件無效
一般情況下我們會把點擊事件添加到循環(huán)行<tr>上，但是由于此組件的原因苹祟，點擊事件會出現(xiàn)問題。解決方法苔咪，給父元素綁定事件，在子元素上進行事件捕獲团赏。
- 父元素綁定事件：父容器添加click事件showInfo，如果需要傳入其他參數(shù)舔清，showInfo可以改為showInfo($event, param)曲初，param為傳入?yún)?shù)
- 在循環(huán)行上添加自定義的 data-x 屬性
- 在事件showInfo中通過鼠標事件e與自定義屬性進行查找
showInfo(e) {
let idx = e.target.parentNode.dataset.index;
console.log(this.list[idx]) //點擊行數(shù)據(jù)
// e：鼠標事件，e.target：點擊元素(<td>)臼婆，e.target.parentNode：點擊元素父元素(<tr>)，e.target.parentNode.dataset：自定義屬性位置
}
- 頁面存在定時器颁褂，數(shù)據(jù)實時刷新時，數(shù)據(jù)量(list.length)減少颁独，由可滾動數(shù)據(jù)量變?yōu)椴豢蓾L動，頁面顯示依然滾動伪冰，limitMoveNum未生效。
在vue-seamless-scroll增加key屬性贮聂，避免組件復(fù)用，每次數(shù)據(jù)請求時刷新key吓懈。key可以定義為當(dāng)前時間（new Date().getTime()）。
參考鏈接
vue-seamless-scroll官方文檔
vue-seamless-scroll插件在線演示文檔
vue-seamless-scroll的使用以及實例
