vue实现列表无缝动态滚动
作者：阿琰a_
要想实现列表的动态无缝滚动,本文为大家推荐两款组件,vue-seamless-scroll和vue3-seamless-scroll,组件的用法也非常简单,下面就跟随小编一起来学习一下吧
要想实现列表的动态无缝滚动，这里推荐两款组件，vue-seamless-scroll和vue3-seamless-scroll，组件的用法也非常简单，以下是使用方式。
vue2
vue2版本使用vue-seamless-scroll
vue-seamless-scroll文档https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/
一、安装组件
npm install vue-seamless-scroll --save
二、引入组件
import VueSeamlessScroll from 'vue-seamless-scroll'
三、使用组件
<template>
<div class="box-content">
<div class="box-table-title">
<div style="width: 40%">所属公司</div>
<div style="width: 20%">检查结果</div>
<div style="width: 30%">检查时间</div>
<div style="width: 10%">操作</div>
</div>
<div class="box-table">
<div class="box-table-body" style="width: 100%;height: 140px;overflow: hidden" @click="clickup($event)">
<vue-seamless-scroll :data="checkList" :classOption="classOption">
<div class="box-table-row" v-for="item in checkList" :key="item.id">
<div class="ellipsis" style="width: 40%">{{ item.enterpriseName }}</div>
<div :class="['ellipsis',item.inspectionResult==='1'?'':'isRed']" style="width: 20%">{{item.inspectionResult==='1'?'合格':'不合格'}}</div>
<div class="ellipsis" style="width: 30%">{{ item.inspectionTime }}</div>
<div class="ellipsis facility-button" style="width: 10%" :data-item="JSON.stringify(item)">详情</div>
</div>
</vue-seamless-scroll>
</div>
</div>
</div>
</template>
组件使用方法很简单，引入组件后，直接给组件传入列表数组和组件配置项即可，外层容器需要设置width、height、overflow:hidden，组件的配置项可以写在computed里缓存起来。
computed: {
classOption () {//大屏滚动配置参数
return {
step: 1, // 数值越大速度滚动越快
limitMoveNum: 6, // 开始无缝滚动的数据量
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
waitTime: 3000, // 单步运动停止的时间(默认值1000ms)
singleHeight:30
}
},
},
实现效果如下
四、注意
在滚动列表中添加点击事件，出现点击事件失效的问题，可以看到在最后一项添加了详情按钮，点击按钮有一部分无法跳出弹窗。
原因是在于滚动组件为了实现无缝滚动，内部复制了一份dom，复制的那份dom无法触发点击事件。
解决方案：
利用事件委托，在详情按钮那里绑定自定义属性，然后给父级元素绑定点击事件，通过e.target.dataset获取自定义属性，拿到对应的数据。
//利用事件委托，解决滚动导致的点击事件失效问题
clickup(e){
if(e.target.dataset.item){
let row = JSON.parse(e.target.dataset.item)
console.log(row)
}
},
vue3里实现列表滚动可以使用vue3-seamless-scroll，用法与vue2版本有一点不同，将配置项拆开传入组件了
vue3
vue3版本使用vue3-seamless-scroll
vue3-seamless-scroll文档：https://doc.wssio.com/opensource/vue3-seamless-scroll/
一、组件安装
npm install vue3-seamless-scroll
二、引入组件
import {Vue3SeamlessScroll} from 'vue3-seamless-scroll'
三、使用组件
<div class="table">
<div class="table-header">
<div>时间</div>
<div>姓名</div>
<div>地址</div>
</div>
<div class="table-body">
<Vue3SeamlessScroll v-model="isScroll" :list="tableData" :step="0.5" :hover="true"
:limitScrollNum="3" :wheel="true">
<div v-for="(item, index) in tableData" :key="index" class="table-row">
<div>{{ item.date }}</div>
<div>{{ item.name }}</div>
<div>{{ item.address }}</div>
</div>
</Vue3SeamlessScroll>
</div>
</div>四、demo实现效果
到此这篇关于vue实现列表无缝动态滚动的文章就介绍到这了,更多相关vue列表无缝动态滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！