vue中使用vue-seamless-scroll插件实现列表无缝滚动效果
作者：船长在船上
这篇文章主要介绍了vue中使用vue-seamless-scroll插件无缝滚动,支持上下左右无缝滚动，单步滚动停留时间，以及水平方向的手动切换，需要的朋友可以参考下
需求：使用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无缝滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！