vue中实现列表无缝动态滚动

要想实现列表的动态无缝滚动,这里推荐两款组件,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实现效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/910375.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

A Consistent Dual-MRC Framework for Emotion-cause Pair Extraction——论文阅读笔记

前言 这是我第一次向同学院同年级的学生和老师们汇报的第一篇论文,于2022年发表在TOIS上,属于CCF A类,主要内容是将MRC应用到情感原因对抽取中。 论文链接:用于情绪-原因对提取的一致双 MRC 框架 |信息系统上的 ACM Transactions 这里我就不放上我自己翻译的中文版还有我…

【docker】5. 背景知识(了解)

Docker 是什么 Docker 本质 Docker 本质其实是 LXC 之类的增强版&#xff0c;它本身不是容器&#xff0c;而是容器的易用工具。容器是 linux 内核中的技术&#xff0c;Docker 只是把这种技术在使用上简易普及了。Docker 在早期的版本其核心就是 LXC 的二次封装发行版。 Docke…

Pr 视频效果:ASC CDL

视频效果/颜色校正/ASC CDL Color Correction/ASC CDL ASC CDL ASC CDL效果通过对红、绿、蓝三个原色通道的独立调整&#xff0c;实现对图像色彩的精确控制。在此基础上&#xff0c;还可用于调整处理后图像的整体饱和度。 ◆ ◆ ◆ 效果选项说明 斜率 Slope、偏移 Offset和功…

linux之调度管理(1)-调度器的初始化

一、linux 启动内核时的第一个进程 init_task linux 进程的鼻祖 0,1,2&#xff0c;我在其他文章中&#xff0c;有具体讲解&#xff0c;链接是&#xff1a; linux 之0号进程、1号进程、2号进程_linux下0号进程 swap-CSDN博客。 在这里就不具体展开了。请看上面的文章详解。 当…

雷池社区版7.1新版本自定义NGINX配置分析

简单介绍雷池&#xff0c;是一款简单好用, 效果突出的 Web 应用防火墙(WAF)&#xff0c;可以保护 Web 服务不受黑客攻击。 雷池通过阻断流向 Web 服务的恶意 HTTP 流量来保护 Web 服务。雷池作为反向代理接入网络&#xff0c;通过在 Web 服务前部署雷池&#xff0c;可在 Web 服…

基于 AIGC 的糖尿病健康管理平台

项目介绍 Healthoney为一款以大语言模型为核心&#xff0c;通过分析用户的各项信息为用户生成定制化的饮食运动计划&#xff0c;提高糖尿病患者生活质量的智能健康管理平台。通过集成体重趋势预测、健康数据分析、食物热量查询、饮食计划个性化定制等功能&#xff0c;帮助用户…

qt QTableWidgetItem详解

1、概述 QTableWidgetItem 是 Qt 框架中的一个类&#xff0c;专门用于在 QTableWidget&#xff08;一个基于项的表格视图&#xff09;中表示单个单元格的内容。QTableWidget 继承自 QAbstractItemView&#xff0c;而 QTableWidgetItem 则作为表格中的一个单元格项&#xff0c;…

常见 HTTP 状态码分类和解释及服务端向前端返回响应时的最完整格式

目前的开发项目&#xff0c;准备明年的国产化&#xff0c;用了十年的自研系统借这个机会全部重写&#xff0c;订立更严格的规范&#xff0c;这里把返回格式及对应状态码记录一下。 常见 HTTP 状态码及解释 HTTP 状态码用于表示客户端请求的响应状态&#xff0c;它们分为五类&a…

卖模版还能赚到钱吗?

说到赚钱&#xff0c;我想大部分人都会感兴趣。但如果告诉大家现阶段卖模板也能赚钱&#xff0c;可能还是有人不信。我要说说我的观察了。 本文可在公众号「德育处主任」免费阅读 我是一只临期程序猿&#xff0c;我最早接触到“模板能卖钱”这个概念是在模板王里。模板王平台上…

基于ssm的个人健康管理系统

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

DB-GPT系列(三):底层大模型设置(开源模型、在线模型)

前面两篇文章分别对 DB-GPT 的总体情况进行了介绍&#xff0c;同时涵盖了镜像一键部署与源码部署这两种部署方式。 DB-GPT系列&#xff08;一&#xff09;&#xff1a;DB-GPT能帮你做什么&#xff1f; DB-GPT系列&#xff08;二&#xff09;&#xff1a;DB-GPT部署&#xff0…

易思智能物流无人值守系统 ExportReport SQL注入漏洞复现

0x01 产品简介 易思无人值守智能物流系统‌是一款集成了人工智能、机器人技术和物联网技术的创新产品。它能够自主完成货物存储、检索、分拣、装载以及配送等物流作业,帮助企业实现无人值守的智能物流运营,提高效率、降低成本,为现代物流行业带来新的发展机遇。该系统旨在为…

stm32 ADC实例解析(3)-多通道采集互相干扰的问题

文章目录 一、问题现象&#xff1a;二、原因分析&#xff1a;1、测量值不准问题分析&#xff1a;2、采样干扰问题分析 三、解决办法&#xff1a;1、硬件&#xff1a;&#xff08;1&#xff09;、电源供电&#xff08;2&#xff09;、引脚电容&#xff08;3&#xff09;、减少采…

ASP.NET Core 路由规则,自定义特性路由 ,IActionConstraint 路由约束 总结 mvc

资料 资料 路由服务 路由服务是在 Program.cs 中使用 builder.Services.AddRouting()注册的&#xff0c; 只是默认在 builder 之前已经注册过了&#xff0c;无需我们再次注册。 AddRouting()方法必须在 UseRouting()方法之前运行&#xff0c;它是路由的基础服务。 MapContro…

在数据库设计中,如何避免全表扫描?

2024年10月NJSD技术盛典暨第十届NJSD软件开发者大会、第八届IAS互联网架构大会在南京召开。百度文心快码总经理臧志分享了《AI原生研发新范式的实践与思考》&#xff0c;探讨了大模型赋能下的研发变革及如何在公司和行业中落地&#xff0c;AI原生研发新范式的内涵和推动经验。 …

Maven的安装配置

文章目录 一、MVN 的下载二、配置maven2.1、更改maven/conf/settings.xml配置2.2、配置环境变量一、MVN 的下载 还是那句话,要去就去官网或者github,别的地方不要去下载。我们下载binaries/ 目录下的 cd /opt/server wget https://downloads.apache.org/maven/maven-3/3.9.6/…

ReactPress系列—NestJS 服务端开发流程简介

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议&#xff0c;感谢Star。 NestJS 服务端开发流程简介 NestJS 是一个用于构建高效、可靠和可扩展的服务器端应用程序的框架。它使用 TypeScript&#xff08;但也支持纯 Java…

Redis数据库测试和缓存穿透、雪崩、击穿

Redis数据库测试实验 实验要求 1.新建一张user表&#xff0c;在表内插入10000条数据。 2.①通过jdbc查询这10000条数据&#xff0c;记录查询时间。 ②通过redis查询这10000条数据&#xff0c;记录查询时间。 3.①再次查询这一万条数据&#xff0c;要求根据年龄进行排序&#…

JavaCV 图像边缘检测 之 Canny 算法

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

Java Agent使用

文章目录 基本使用premain使用场景 agentmain 关于tools.jar https://docs.oracle.com/en/java/javase/20/docs/specs/jvmti.html com.sun的API&#xff0c;如果使用其他厂商的JVM&#xff0c;可能没有这个API了&#xff0c;比如Eclipse的J9 https://www.ibm.com/docs/en/sdk…