安装
npm install vue-seamless-scroll --save
引入组件
import vueSeamlessScroll from 'vue-seamless-scroll'
参数配置,不配置的话 就是使用默认
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)
}
}
},
使用案例具体看情况
<vue-seamless-scroll
:data="newData.taskInfoListToday"
:class-option="defaultOption"
class="warp"
>
<ul class="item">
<li v-for="(item, index) in newData.taskInfoListToday" :key="index">
<span class="title" v-text="item.beamNo" />
<span
class="title center pdr"
style="flex: 1.5;"
v-text="item.beamModel"
/>
<span
class="title right pdr"
v-text="testData[item.productionState]"
/>
<span
class="title right"
style="flex: 1.5;"
v-text="item.theWorkTeam"
/>
</li>
</ul>
</vue-seamless-scroll>
之前遇到过问题是 滚动内容必须要超过4条还是5条才能滚动 不知道是不是设置问题