需求：使用vue-seamless-scroll插件实现列表无缝滚动，也可以添加相应的点击跳转，点击事件会存在点击失效的问题。支持上下左右无缝滚动，单步滚动停留时间，以及水平方向的手动切换。
效果图：
基于vue的无缝滚动组件
注意：需要给父容器一个
height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化css width。
参考配置：
向下滚动
direction:0向下滚动
direction:1向左滚动
direction:2向右滚动
direction:3鼠标悬停关闭
hoverStop:false单行停顿
singleHeight:26单行停顿时间
singleHeight:26waitTime:2500
1、安装
npm install vue-seamless-scroll --save
2、引入使用
局部 页面使用：
import vueSeamlessScroll from "vue-seamless-scroll";
components: {
vueSeamlessScroll,
},
data(){
return {
bbsData:[]
}
},
computed: {
bbsOption () {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 3, // 开始无缝滚动的数据量 this.bbsData.length
hoverStop: false, // 是否开启鼠标悬停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)
}
}
}全局main.js引入：
import vueSeamlessScroll from 'vue-seamless-scroll' Vue.use(vueSeamlessScroll)
主要代码：
bbsData是接口获取的数据绑定，根据自己绑定定义。
<div class="three-info mt40 bbsInfo" v-if="bbsData.length>0" @click.stop="handleBBs($event)">
<vue-seamless-scroll :data="bbsData" :class-option="bbsOption" >
<ul class="ul-scoll">
<li v-for="item in bbsData" :key='item.topicId' class="info-item flex align-items">
<div class=" fontSize20 info-tag mr10 bbs-tag">论坛</div>
<div class=" fontSize26 color3 van-ellipsis" style="flex:1" :data-id="item.topicId">{{item.topicTitle}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>.three-info{
padding:0 20px 20px;
border-radius: 10px;
}
.info-item{
padding-bottom:20px;
padding-top:20px;
border-bottom:1px solid #F1F6F8;
}
.info-item .info-tag{
width: 62px;
padding:6px 10px;
background: #3E91FF;
color:#fff;
text-align: center;
border-radius: 6px;
}
.bbsInfo{
background:#FEFBE8;
height:264px;
overflow: hidden;
}
.info-item .bbs-tag{
background:#FAAF3D;
}到此这篇关于vue中使用vue-seamless-scroll插件无缝滚动的文章就介绍到这了,更多相关vue无缝滚动内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！