vue中实现列表无缝滚动

1.安装

npm install vue-seamless-scroll --save

2.在需要使用的组件中引入进行配置

import vueSeamlessScroll from "vue-seamless-scroll";

在components中注入

components: { vueSeamlessScroll },

3.使用

<template><div class="seamlessRolling" @click="lookClick($event)"><vue-seamless-scroll :data="msgData" :class-option="classOption"><ul><li v-for="(item, index) in msgData" :key="index"><span>{{ item.id }}</span><span>{{ item.title }}</span><span class="handle" :id="item.id" :data-tit="item.title">查看</span></li></ul></vue-seamless-scroll></div>
</template><script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'import vueSeamlessScroll from "vue-seamless-scroll";
export default {// import引入的组件需要注入到对象中才能使用components: { vueSeamlessScroll },data() {// 这里存放数据return {msgData: [{id: 1,name: 1,title: "无缝滚动001",},{id: 2,name: 2,title: "无缝滚动002",},{id: 3,name: 3,title: "无缝滚动003",},{id: 4,name: 4,title: "无缝滚动004",},{id: 5,name: 5,title: "无缝滚动005",},],};},// 计算属性 类似于data概念computed: {classOption() {return {step: 1, // 数值越大速度滚动越快limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};},},// 监控data中的数据变化watch: {},// 方法集合methods: {lookClick(e) {if (e.target.className == "handle") {console.log(e.target.id);console.log(e.target.dataset.tit);}},},// 生命周期 - 创建完成（可以访问当前this实例）created() {},// 生命周期 - 挂载完成（可以访问DOM元素）mounted() {},beforeCreate() {}, // 生命周期 - 创建之前beforeMount() {}, // 生命周期 - 挂载之前beforeUpdate() {}, // 生命周期 - 更新之前updated() {}, // 生命周期 - 更新之后beforeDestroy() {}, // 生命周期 - 销毁之前destroyed() {}, // 生命周期 - 销毁完成activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script><style lang='scss' >
//@import url(); 引入公共css类
</style>
<style lang='scss' scoped>
//@import url(); 引入公共css类
* {padding: 0;margin: 0;
}
.seamlessRolling {margin: 0 auto;width: 300px;height: 200px;border: 1px solid rgb(165, 76, 76);overflow: hidden;ul,li {list-style: none;}li {height: 60px;line-height: 60px;display: flex;justify-content: space-around;.handle {cursor: pointer;}}
}
</style>

4.配置项说明

data中的msgData为所需要实现滚动的列表数据,计算属性computeds中classOption为滚动属性的配置

5.可能会遇到的问题

vue-seamless-scroll是通过将要实现滚动的数据复制一遍来实现无缝滚动,当需要给每一条数据绑定事件时,如果直接绑定,复制出的数据无法绑定事件。可以通过事件委托的方式，给列表元素的父元素绑定事件，通过事件对象event,获取到点击元素的类名进行判断其是否为需要的元素,将绑定事件所需的id绑定为按钮id,可以通过event.target.id获取。或者将所要传递的变量绑定为该按钮的自定义属性，如data-tit，通过event.target.dataset.tit获取。

vue中实现列表无缝滚动相关推荐

如何实现vue中的列表动画，如何封装vue动画
文章目录一.vue中的列表动画如何实现列表动画原理: 二.vue中如何封装动画第1个版本:css动画版第2个版本: js动画版(推荐) 一.vue中的列表动画如何实现举个例子: 列表动画原理 ...
vue中实现公告栏的滚动特效
vue中实现公告栏的滚动特效文章目录 vue中实现公告栏的滚动特效前言修改版本前言 vue中实现公告栏的滚动特效修改版本 <template><div id="d ...
Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿从头至尾再循环播放时没有停顿实现这种情况可以使用CSS3的动画实现 ...
vue中展示列表，类似formatter方法及在vue中点击页面信息事件
后台返回文件路径及文件名,前端展示只需要展示文件名,在Easyui中使用formatter方法很轻松就实现了,在vue中,需要使用过滤方式: formatterfj方法为截取字符串返回文件名该方法应 ...
vue中给window添加滚动监听无效的解决方案
页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作. 我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mou ...
Vue 中的列表渲染
列表渲染 <div id="app"><div v-for="(item,index) of list" :key="index&q ...
vue中使用scrollreveal制作滚动动画
现在很多产品展示的网页在滚动的时候会触发动画,如果用js去写的话需要监听scrolltop,会很繁琐,而scrollreveal.js可以完美地实现这样的效果,满足我们自定义css3动画以及支持ani ...
vue手写列表竖向滚动
看看效果图最近由于项目需求,需要做一个列表的无线循环滚动,由于我们项目没有用UI库,所以手写了一个列表滚动,不过虽然网上很多,但还是想记录下来,话不多说了,上代码! 样式层 <template ...
记vue中如何使用better-scroll滚动插件
这款插件是基于iscroll插件做的重新封装,改善了一些bug,增加了一些拓展功能,有兴趣的小伙伴们可以自行下载体验体验. 很多人已经用过 better-scroll,我收到反馈最多的问题是: bet ...