需求描述
系统中展示进行中任务列表，默认展示5条记录，超出5条记录后列表自动滚动展示。
插件安装及使用
vue-seamless-scroll 基于vue.js的无缝滚动
- 安装：
npm install vue-seamless-scroll --save
yarn add vue-seamless-scroll
- 系统引用
全局注册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
}
}
- 代码实现
<div class="title-text">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th>任务名称</th>
<th>执行人</th>
<th>当前进度</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">暂无数据</div>
- 部分配置
computed: {
scrollOption () {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 6, // 开始无缝滚动的数据量 this.list.length+1
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 21, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 2500 // 单步运动停止的时间(默认值1000ms)
}
}
},
注意事项
- vue-seamless-scroll
滚动数据data必须设置，否则将不会滚动。样式需要设置高度与overflow: hidden; - 单步运动停止的高度
单步运动停止的高度应该为单行数据高度的整数倍，在文章示例中就是<tr>高度的整数倍。当设置为整数倍时，列表文字都可以清楚展示看做为无缝滚动，否则就会出现文字展示不全的问题。 - 单行数据添加点击事件无效
一般情况下我们会把点击事件添加到循环行<tr>上，但是由于此组件的原因，点击事件会出现问题。解决方法，给父元素绑定事件，在子元素上进行事件捕获。
- 父元素绑定事件：父容器添加click事件showInfo，如果需要传入其他参数，showInfo可以改为showInfo($event, param)，param为传入参数
- 在循环行上添加自定义的 data-x 属性
- 在事件showInfo中通过鼠标事件e与自定义属性进行查找
showInfo(e) {
let idx = e.target.parentNode.dataset.index;
console.log(this.list[idx]) //点击行数据
// e：鼠标事件，e.target：点击元素(<td>)，e.target.parentNode：点击元素父元素(<tr>)，e.target.parentNode.dataset：自定义属性位置
}
- 页面存在定时器，数据实时刷新时，数据量(list.length)减少，由可滚动数据量变为不可滚动，页面显示依然滚动，limitMoveNum未生效。
在vue-seamless-scroll增加key属性，避免组件复用，每次数据请求时刷新key。key可以定义为当前时间（new Date().getTime()）。
参考链接
vue-seamless-scroll官方文档
vue-seamless-scroll插件在线演示文档
vue-seamless-scroll的使用以及实例
