vue列表无缝滚动效果
张宸阳 人气:01.安装
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.length hoverStop: true, // 是否开启鼠标悬停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) }; }, }, // 监控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获取。
加载全部内容