vue实现无限滚动,vue列表循环滚动插件
本文主要详细介绍vue列表的无缝滚动效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue实现列表无缝滚动的具体代码，供大家参考。具体内容如下
1.安装
npm安装vue-无缝-滚动-保存
2.在需要使用的组件中引入进行配置
从“vue-seamless-scroll”导入vueSeamlessScroll
注入组件
组件：{ vueSeamlessScroll }，
3.使用
模板
div class= seamless rolling @ click= look click($ event)
vue-无缝滚动：data= msg data :class-option= class option
保险商实验所
li v-for=(item，index) in msgData :key=index
span{{ item.id }}/span
span{{ item.title }}/span
handle :id= item . id :data-tit= item . title 视图/span
/李
/ul
/vue-无缝-滚动
/div
/模板
脚本
//这里可以导入其他文件(例如：组件、工具js、第三方插件js、json文件、镜像文件等。)
//例如：从 《组件名称》 导入《组件路径》
从“vue-seamless-scroll”导入vueSeamlessScroll
导出默认值{
//导入引入的组件需要注入到对象中才能使用。
组件：{ vueSeamlessScroll }，
data() {
//在此存储数据
返回{
消息数据：[
{
id: 1，
名称：1，
标题：“无缝滚动001”，
},
{
id: 2，
名称：2，
标题：“无缝滚动002”，
},
{
id: 3，
名称：3，
标题：“无缝卷轴003”，
},
{
id: 4，
名称：4，
标题：“无缝滚动004”，
},
{
id: 5，
名称：5，
标题：“无缝卷轴005”，
},
],
};
},
//计算属性类似于数据的概念
计算值：{
classOption() {
返回{
Step: 1，//值越大，滚动速度越快。
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)
};
},
},
//监控数据中的数据变化
观察：{}，
//方法集合
方法：{
看点击(e) {
if(e . target . class name== handle ){
console . log(e . target . id)；
console . log(e . target . dataset . tit)；
}
},
},
//生命周期-创建完成(可以访问当前的this实例)
已创建(){}，
//生命周期挂载完成(可以访问DOM元素)
已安装(){}，
Before () {}，//生命周期-创建前
BeforeMount() {}，//生命周期-装载前
Before () {}，//生命周期-更新前
Updated() {}，//生命周期-更新后
BeforeDestroy() {}，//生命周期-销毁前
Destroyed() {}，//生命周期-销毁完成
Activated() {}，//如果页面有保活缓存功能，这个功能会触发
};
/脚本
样式lang=scss
//@ import URL()；引入公共css类
/风格
style lang=scss 范围
//@ import URL()；引入公共css类
* {
填充：0；
边距：0；
}。无缝轧制{
边距：0自动；
宽度：300px
高度：200px
边框：1px纯色rgb(165，76，76)；
溢出：隐藏；
ul，
李{
列表样式：无；
}
李{
高度：60px
行高：60px
显示器：flex
justify-content:space-around；手柄{
光标：指针；
}
}
}
/风格
4.配置项说明
Data中的MsgData是要滚动的列表数据，computeds中的classOption是滚动属性的配置。
5.可能会遇到的问题
Vue-seamless-scroll通过复制要滚动的数据实现无缝滚动。当需要将事件绑定到每个数据时，如果是直接绑定，则复制的数据无法绑定到事件。您可以通过事件委托将事件绑定到列表元素的父元素。通过event object Event可以获取被点击元素的类名来判断是否为必选元素，并将绑定事件所需的id绑定到按钮id，可以通过event.target.id获取或者绑定要作为按钮自定义属性传递的变量，比如data-tit，通过event.target.dataset.tit获取
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。