vue seamless scroll,vue-seamless-scroll实现点击效果不起作用

　　本文主要介绍vue中使用vue-seamless-scroll插件的无缝滚动，支持上下左右无缝滚动，单步滚动停留时间，水平方向手动切换。有需要的朋友可以参考一下。

　　需求:使用vue-seamless-scroll插件实现列表的无缝滚动，还可以添加相应的点击跳转。在点击事件中会出现点击失效的问题。支持上下左右无缝滚动，单步滚动停留时间，水平方向手动切换。

　　效果图：

　　基于vue的无缝滚动组件

　　注意：您需要给父容器一个高度和：data=Array 和overfolw:hidden；左右滚动需要ul容器的初始化css宽度。

　　参考：

　　向下滚动方向：0

　　向下滚动方向：1

　　向左滚动方向：2

　　向右滚动方向：3

　　当鼠标悬停停止时悬停停止：假

　　单暂停单高度：26

　　单一暂停时间单一高度：26等待时间：2500

　　1.装置

　　npm安装vue-无缝-滚动-保存

　　2.介绍和使用

　　部分页面使用：

　　从“vue-seamless-scroll”导入vueSeamlessScroll

　　组件：{

　　vueSeamlessScroll，

　　},

　　data(){

　　返回{

　　bbsData:[]

　　}

　　},

　　计算值：{

　　bbsOption () {

　　返回{

　　步长：0.2，//值越大，滚动速度越快。

　　Limitenum: 3，//开始无缝滚动的数据量this.bbsData.length

　　Verstop: false，//要打开鼠标悬停停止吗？

　　方向：1，//0向下1向上2向左3向右

　　Open: true，//开启实时数据监控刷新dom

　　Height: 0，//单步运动停止的高度(默认值0为无缝不停止滚动)direction=0/1

　　Singwidth: 0，//单步运动停止的宽度(默认值0为无缝不停止滚动)方向=2/3

　　等待时间：1000 //单步运动停止的时间(默认值为1000毫秒)

　　}

　　}

　　}

　　Global main.js简介：

　　从“vue-无缝滚动”导入vueSeamlessScroll

　　vue . use(vueseamlesscroll)

　　主要代码：

　　BbsData是接口获取的数据绑定，是根据自身绑定定义的。

　　div class= three-info mt40 BBS info v-if= BBS data . length 0 @ click . stop= handle BBS($ event)

　　vue-无缝滚动：data= BBS data :class-option= BBS option

　　 ul class=ul-scoll

　　Li v-for= item in BBS data :key= item . topic id class= info-item flex align-items

　　 fontsize20info-tagmr10bbs-tag 论坛/div

　　div class= font size 26 color 3 van-ellipsis style= flex:1 :data-id= item . topic id { { item . topic title } }/div

　　/李

　　/ul

　　/vue-无缝-滚动

　　/div。三信息{

　　填充：0 20px 20px

　　边框半径：10px

　　}。信息项目{

　　填充-底部：20px

　　padding-top:20px；

　　border-bottom:1px solid # f1f6 f 8；

　　}。信息项。信息标签{

　　宽度：62px

　　填充：6px 10px

　　背景：# 3e 91 ff；

　　颜色：# fff

　　文本对齐：居中；

　　边框-半径：6px

　　}。bbsInfo{

　　背景：# FEFBE8

　　身高：264px

　　溢出：隐藏；

　　}。信息项。bbs标签{

　　背景：# FAAF3D

　　}

　　这就是这篇关于在vue中使用vue-seamless-scroll插件实现无缝滚动的文章。更多相关Vue无缝滚动内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。