vue-制作自动滚动效果

第一步:下载
可以查看官方地址
chenxuan0000
   

npm i vue-seamless-scroll -save

第二步:引用
 

import vueSeamlessScroll from "vue-seamless-scroll";//注册components: {vueSeamlessScroll,},


第三步:使用

   <vue-seamless-scroll :data="warnings" :class-option="classOption">//需要滚动的部分放在这里</vue-seamless-scroll>computed: {classOption() {return {step: 0.4, // 数值越大速度滚动越快limitMoveNum: this.warnings.length, // 开始无缝滚动的数据量 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)};},},

第四步:给一个例子

 <vue-seamless-scroll :data="warnings" :class-option="classOption"><view class="" v-for="(item, index) in warnings" :key="item.id">{{ item.name }}</view></vue-seamless-scroll>import vueSeamlessScroll from 'vue-seamless-scroll';//数组
// 自动滚动数据warnings: [{id: 1,name: '李四1'},{id: 2,name: '李四2'},{id: 3,name: '李四3'},{id: 6,name: '李四4'},{id: 4,name: '李四5'},{id: 5,name: '李四6'}],
//注册components: {vueSeamlessScroll},computed: {classOption() {return {step: 0.4, // 数值越大速度滚动越快limitMoveNum: this.warnings.length, // 开始无缝滚动的数据量 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)};}},

第五步:

 如何有点击事件 请按照下面的步骤进行

首先是在  vue-seamless-scroll  添加一个

  @click.native="handleClick($event)" 并在方法中添加
  需要再每一行 或者 循环的每一个 

  添加  

:data-id=“item.id”
:data-name=“item.name”
:data-obj=“JSON.stringify(item)”

 然后再点击的时候再去解析、它(再去做其他的操作)

   handleClick($event) {const all = JSON.parse($event.target.dataset.obj); //这是你每一行 添加的data-名字console.log(all );},
 <vue-seamless-scroll:data="warnings"
//添加这个属性 @click.native="handleClick($event)":class-option="classOption"><tbody><trv-for="(item, index) in warnings":key="index"><td :data-obj="JSON.stringify(item)" class="events1">{{ item.date | filterDateTime }}</td><td:data-obj="JSON.stringify(item)":title="item.eventName"class="events">{{ item.eventName }}</td><td :data-obj="JSON.stringify(item)" class="events1">{{ item.source | filterType }}</td><td :data-obj="JSON.stringify(item)" class="events1">{{ item.content }}</td></tr></tbody></vue-seamless-scroll>handleClick($event) {const headId = JSON.parse($event.target.dataset.obj);},



如果需要其他的,可以自行配置!!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MongoDB面试题

1. NoSQL 数据库是什么意思?NoSQL 与 RDBMS 直接有什么区别?为什么要使用和不使用 NoSQL 数据库?说一说 NoSQL 数据库的几个优点? NoSQL 是非关系型数据库&#xff0c;NoSQL Not Only SQL。 关系型数据库采用的结构化的数据&#xff0c;NoSQL 采用的是键值对的方式存储数…

常用数据处理方式

文章目录 一、不同格式数据读取及转换split data into X and y二、数据预处理1、去重2、删除某一列3、删除两行4、date转字符串5、修改类型6、修改日期类型7、修改字段名8、加年月9、 删除字段10、 查看数据中顶部10%的数据11、设置索引12、判断空值13、排序14、 模糊查询15、修…

linux部署springboot项目中文乱码

问题描述&#xff1a; 将springboot项目打成jar包部署到linux服务器发现中文乱码 解决办法&#xff1a; java -Dfile.encodingutf-8 -jar xxxxx.jar转载至&#xff1a;https://blog.csdn.net/qq_39706515/article/details/119807632

Java---使用lombok简化实体类的编写----不要再写getter+sertter方法了

目录 使用lombok简化实体类的编写 首先&#xff1a; 加入lombok依赖&#xff1a; 然后 加上一个注解&#xff1a;Data 使用lombok简化实体类的编写 首先&#xff1a; 加入lombok依赖&#xff1a; <dependency><groupId>org.projectlombok</groupId>…

【问题随记】

ubuntu 14.04源更新(sources.list) deb http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ trusty-security main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ trusty-update…

clickhouse查询缓存

为了实现最佳性能&#xff0c;数据库需要优化其内部数据存储和处理管道的每一步。但是数据库执行的最好的工作是根本没有完成的工作&#xff01;缓存是一种特别流行的技术&#xff0c;它通过存储早期计算的结果或远程数据来避免不必要的工作&#xff0c;而访问这些数据的成本往…

软件测试需求分析的常用方法

软件测试需求分析时&#xff0c;应要求产品人员对需求进行讲解&#xff0c;并使用相对应的方法进行科学分析&#xff0c;否则无法保障软件测试的完整性和科学性&#xff0c;从而造成在项目中后期Bug频出、风险增大等问题。 而常用的测试需求分析的方法&#xff1a; 1、功能分解…

Protobuf

Protobuf&#xff08;Googles Protocol Buffers&#xff09;是一种灵活、高效、自动化的二进制序列化格式&#xff0c;它可以用于数据存储、通信协议等场景。相比其他序列化格式&#xff08;如JSON、XML等&#xff09;&#xff0c;Protobuf在序列化和反序列化速度和数据大小方面…

解决 MySQL 删除数据后,ID 自增不连续问题

修复前 除了部分数据&#xff0c;导致后续新增的数据&#xff0c;ID 自增不连续 解决方案 执行下方 SQL 语句即可修复此问题&#xff0c;mbs_order为需要修复的表名 SET i0; UPDATE mbs_order SET id(i:i1); ALTER TABLE mbs_order AUTO_INCREMENT0;

进程与线程、线程创建、线程周期、多线程安全和线程池(ThreadPoolExecutor)

目录 进程与线程线程和进程的区别是什么&#xff1f;线程分两种&#xff1a;用户线程和守护线程线程创建四种方式run()和start()方法区别&#xff1a;为什么调用 start() 方法时会执行 run() 方法&#xff0c;为什么不能直接调用 run() 方法&#xff1f;Runnable接口和Callable…

该选择WPF 还是 Winform?

WPF和WinForms都是.NET平台下的桌面应用程序开发框架&#xff0c;它们各有特点&#xff0c;适用于不同的场景和需求。下面是对WPF和WinForms的一些比较和优劣势&#xff1a;WPF&#xff08;Windows Presentation Foundation&#xff09;&#xff1a;WPF具有强大的图形渲染能力&…

刷题笔记 day7

力扣 209 长度最小的子数组 解法&#xff1a;滑动指针&#xff08;对同向双指针区间内的数据处理&#xff09; 1&#xff09;先初始化 两个指针 left &#xff0c;right。 2&#xff09;右移指针right的同时使用sum记录指针right处的值&#xff0c;并判断sum的值是否满足要求&…

在CSDN学Golang场景化解决方案(分布式日志系统)

一&#xff0c;传统 elk 解决方案及其弊端 传统ELK&#xff08;Elasticsearch Logstash Kibana&#xff09;方案是一种流行的分布式日志系统解决方案&#xff0c;但也存在一些弊端&#xff1a; 依赖性&#xff1a;ELK使用Java编写&#xff0c;需要安装JVM&#xff0c;并且还…

iOS--Runloop

Runloop概述 一般来说&#xff0c;一个线程一次只能执行一个任务&#xff0c;执行完成后线程就会退出。就比如之前学OC时使用的命令行程序&#xff0c;执行完程序就结束了。 而runloop目的就是使线程在执行完一次代码之后不会结束程序&#xff0c;而是使该线程处于一种休眠的状…

更新页面无法回显

需求与问题&#xff1a; 在菜品管理开发中&#xff0c;我需要修改菜品&#xff0c;第一步是回显页面&#xff0c;但在我再三确认代码无误的情况下依旧无法回显内容 问题发现与解决&#xff1a; 经过排查&#xff0c;我发现我的DishDTO内容如下&#xff1a; Data public clas…

【C++】类和对象-多态

1.多态的基本语法 代码 #include <iostream> using namespace std; /******************************************/ class Animal { public://speak函数就是虚函数//函数前面加上virtual关键字&#xff0c;变成虚函数&#xff0c;//那么编译器在编译的时候就不能确定函数…

【黑马头条之kafka及异步通知文章上下架】

本笔记内容为黑马头条项目的kafka及异步通知文章上下架部分 目录 一、kafka概述 二、kafka安装配置 三、kafka入门 四、kafka高可用设计 1、集群 2、备份机制(Replication&#xff09; 五、kafka生产者详解 1、发送类型 2、参数详解 六、kafka消费者详解 1、消费者…

助力工业物联网,工业大数据之服务域:油站主题分析【二十六】

文章目录 07&#xff1a;服务域&#xff1a;油站主题分析08&#xff1a;服务域&#xff1a;油站主题实现 07&#xff1a;服务域&#xff1a;油站主题分析 目标&#xff1a;掌握油站主题的需求分析 路径 step1&#xff1a;需求step2&#xff1a;分析 实施 需求&#xff1a;统计…

Flink - sink算子

水善利万物而不争&#xff0c;处众人之所恶&#xff0c;故几于道&#x1f4a6; 文章目录 1. Kafka_Sink 2. Kafka_Sink - 自定义序列化器 3. Redis_Sink_String 4. Redis_Sink_list 5. Redis_Sink_set 6. Redis_Sink_hash 7. 有界流数据写入到ES 8. 无界流数据写入到ES 9. 自定…

小程序自定义tabBar+Vant weapp

1.构建npm&#xff0c;安装Vant weapp&#xff1a; 1&#xff09;根目录下 &#xff0c;初始化生成依赖文件package.json npm init -y 2&#xff09;安装vant # 通过 npm 安装 npm i vant/weapp -S --production 3&#xff09;修改 package.json 文件 开发者工具创建的项…