vue seamless scroll,vue监听滚动scroll
本文主要详细介绍了如何使用vue-seamless-scroll无缝滚动组件。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue无缝滚动组件vue-seamless-scroll的具体实现代码，供大家参考。具体内容如下
下载
cnpm I-S vue-无缝滚动
main.js中介绍：
从“vue-无缝滚动”导入VueSeamlessScroll
vue . use(vueseamlesscroll)
使用：
模板
差异
无缝滚动
:data=listData
:class-option= seamless scroll option
style=
边框：1px纯白；
高度：200px
溢出：隐藏；
宽度：200px
颜色：白色；
字体大小：18px
文本对齐：居中；
保险商实验所
里
listData中的v-for=(item，index
:key=index
style= padding:10px；边距：5px
span class= title“{ item . title } }:/span
span class= date { item . time } }/span
/李
/ul
/vue-无缝-滚动
/div
/模板
脚本
导出默认值{
道具：{}，
data() {
返回{
列表数据：[
{
标题：“张三”，
时间： 2021-08-09 ，
},
{
头衔：“李四”，
时间： 2021-08-09 ，
},
{
标题：“王五”，
时间： 2021-08-09 ，
},
{
标题：“刘钊”，
时间： 2021-08-09 ，
},
{
标题：“前七名”，
时间： 2021-08-09 ，
},
{
标题：“孙霸”，
时间： 2021-08-09 ，
},
],
};
},
计算值：{
seamlessScrollOption() {
返回{
步长：0.2，//值越大，滚动速度越快。
Limitenum: 2，//开始无缝滚动的数据量this.dataList.length
Verstop: true，//要打开鼠标悬停停止吗？
方向：1，//0向下1向上2向左3向右
Open: true，//开启实时数据监控刷新dom
Height: 0，//单步运动停止的高度(默认值0为无缝不停止滚动)direction=0/1
Singwidth: 0，//单步运动停止的宽度(默认值0为无缝不停止滚动)方向=2/3
WaitTime: 1000，//单步运动停止的时间(默认值为1000ms)
};
},
},
};
/脚本
效果图2:
计算值：{
seamlessScrollOption() {
返回{
步长：0.5，//值越大，滚动速度越快。
Verstop: true，//要打开鼠标悬停停止吗？
方向：0，//0向下1向上2向左3向右
Open: true，//开启实时数据监控刷新dom
高度：40，//单步运动停止的高度(默认值0为无缝滚动不停止)方向=0/1
Singwidth: 0，//单步运动停止的宽度(默认值0为无缝不停止滚动)方向=2/3
等待时间：2000，//单步运动停止的时间(默认值为1000毫秒)
};
},
},
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。