1.安装依赖
npm i vue-seamless-scroll -S
2.局部注册
import vueSeamless from 'vue-seamless-scroll'
export default {
components: {
vueSeamless
}
}
3.使用
HTML
<vue-seamless-scroll
:data="pt3Data.list[pt3Data.index].text1" //可以循环便利的数组
:class-option="classOption"
class="seamless-warp"
>
<div>
{{ pt3Data.list[pt3Data.index].text1 }}//展示 这个是调的接口
</div>
</vue-seamless-scroll>
可以看看这个插件的文档
computed: {
classOption() {
return {
step: 0.3, //数值越大速度滚动越快
limitMoveNum: 5, //开始无缝滚动的数据量 //this.fourDatata.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)
};
},
},
css
.seamless-warp{
width: 100%;
height: calc(100% - 10px);
// height: 100%;
overflow: hidden;
}