当前位置: 首页 > news >正文

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);},



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

相关文章:

vue-制作自动滚动效果

第一步&#xff1a;下载 可以查看官方地址chenxuan0000 npm i vue-seamless-scroll -save 第二步&#xff1a;引用 import vueSeamlessScroll from "vue-seamless-scroll";//注册components: {vueSeamlessScroll,}, 第三步&#xff1a;使用 <vue-seamless…...

[国产MCU]-BL602-开发实例-DMA数据传输

DMA数据传输 文章目录 DMA数据传输1、DMA介绍2、DMA驱动API介绍3、DMA使用示例DMA(Direct Memory Access)是一种内存存取技术,可以独立地直接读写系统内存,而不需处理器介入处理。 在同等程度的处理器负担下,DMA是一种快速的数据传送方式。 BL602的DMA控制器有4组独立专用通…...

Redis压缩列表

区分一下 3.2之前 Redis中的List有两种编码格式 一个是LINKEDLIST 一个是ZIPLIST 这个ZIPLIST就是压缩列表 3.2之后来了一个QUICKLIST QUICKLIST是ZIPLIST和LINKEDLIST的结合体 也就是说Redis中没有ZIPLIST和LINKEDLIST了 然后在Redis5.0引入了LISTPACK用来替换QUiCKLIST中的…...

【SA8295P 源码分析】62 - Android GVM Kernel 内核 make bootimage 过程分析

【SA8295P 源码分析】62 - Android GVM Kernel 内核 make bootimage 过程分析 一、make bootimage 命令执行过程分析1.1 source buid/envsetup.sh 分析1.2 lunch msmnile_gvmq-userdebug 分析1.3 make bootimage:step 1 之 加载配置文件过程分析1.4 make bootimage:step 2 之…...

机器学习——SMO算法推导与实践

一、 硬间隔-SMO算法推导 明天再说&#xff0c;啊。。。。感觉天空明朗了很多&#xff0c;即使现在已经很晚了 还是要打开柯南&#xff0c;看看电视&#xff0c;等待天气预报所说的台风天吧&#xff01; 一时之间&#xff0c;忽然失去了用markdown语法写下推导过程的勇气。。。…...

mac的终端通过code .指令快速启动vscode

通过在vscode中安装"code"命令工具 打开vsocode&#xff0c;使用快捷键⇧⌘P&#xff0c;然后输入shell&#xff0c;会弹出来“Shell命令&#xff1a;在PATH中安装‘code’命令”浮窗&#xff0c;选择安装就可以了&#xff0c;然后就可以在终端通过code .来快速启动…...

前端系统使用iframe下载文件

需求描述 前端调用后端的接口&#xff0c;获取到文件的路径&#xff0c;并下载。 碰到的问题 页面组件存在与云端的组件库&#xff0c;使用window.open()无法满足需求&#xff08;在当前页面下载&#xff09;&#xff0c;因为路径是跨域的&#xff0c;所以决定使用iframe的方…...

RabbitMQ - 简单案例

目录 0.引用 1.Hello world 2.轮训分发消息 2.1 抽取工具类 2.2 启动两个工作线程接受消息 2.4 结果展示 3.消息应答 3.1 自动应答 3.2 手动消息应答的方法 3.3 消息自动重新入队 3.4 消息手动应答代码 4.RabbitMQ 持久化 4.1 队列如何实现持久化 4.2 消息实现持久化 5.不…...

《吐血整理》高级系列教程-吃透Fiddler抓包教程(30)-Fiddler如何抓Android7.0以上的Https包-番外篇

1.简介 通过宏哥前边几篇文章的讲解和介绍想必大家都知道android7.0以上&#xff0c;有android的机制不在信任用户证书&#xff0c;导致https协议无法抓包。除非把证书装在系统信任的证书里&#xff0c;此时手机需要root权限。但是大家都知道root手机是非常繁琐的且不安全&…...

服务器被攻击了怎么办?

服务器被攻击是无法避免的&#xff0c;但是我们能通过做好防护措施&#xff0c;提高服务器的安全性&#xff0c;降低被攻击的几率。那么当服务器已经被 攻击了&#xff0c;怎样才能降低损失呢&#xff1f;该怎样补救&#xff1f; 断开网络 全部的攻击都来自于网络&#xff0c;因…...

P1156 垃圾陷阱(背包变形)

垃圾陷阱 题目描述 卡门――农夫约翰极其珍视的一条 Holsteins 奶牛――已经落了到 “垃圾井” 中。“垃圾井” 是农夫们扔垃圾的地方&#xff0c;它的深度为 D D D&#xff08; 2 ≤ D ≤ 100 2 \le D \le 100 2≤D≤100&#xff09;英尺。 卡门想把垃圾堆起来&#xff0c…...

[Docker实现测试部署CI/CD----构建成功后钉钉告警(7)]

目录 15、钉钉告警创建项目群&#xff0c;然后添加机器人添加机器人Jenkins 系统配置项目配置修改Jenkinsfile文件&#xff0c;添加钉钉提示信息测试 不修改Jenkinsfile文件&#xff0c;添加钉钉提示信息测试 15、钉钉告警 创建项目群&#xff0c;然后添加机器人 首先需要在钉…...

UE5 半透明覆层材质

文章目录 前言介绍示例1示例2示例3 前言 本文采用虚幻5.2.1版本演示&#xff0c;介绍半透明覆层材质&#xff08;覆层材质&#xff09;。 介绍 半透明覆层材质是 UE5.1 版本 更新的功能&#xff0c;使用半透明覆层材质&#xff0c;可以轻松的给物体表面附着一层材质。 在UE5…...

在Raspberry Pi 4上安装Ubuntu 20.04 + ROS noetic(不带显示器)

在Raspberry Pi 4上安装Ubuntu 20.04 ROS noetic&#xff08;不带显示器&#xff09; 1. 所需设备 所需设备&#xff1a; 树莓派 4 B 型 wifi microSD 卡&#xff1a;最小 32GB MicroSD 转 SD 适配器 &#xff08;可选&#xff09;显示器&#xff0c;鼠标等 2. 树莓派…...

CommStudio for .NET Crack

CommStudio for .NET Crack CommStudio for.NET使您的应用程序可以轻松地使用串行端口和调制解调器进行通信。CommStudio for.NET是一套全面的组件和可视化调试工具&#xff0c;可将远程系统和设备与visual Studio 2005和visual Studio 2008集成。开发与遗留系统和外部设备集成…...

蓝桥杯上岸考点清单 (冲刺版)!!!

大家好 我是寸铁&#x1f4aa; 真题千千万万遍&#xff0c;蓝桥省一自然现&#xff01; ✌️ 日更3000里&#xff0c;蓝桥眷顾你 &#x1f31f; 暴力出奇迹&#xff0c;打表过样例 &#x1f44a; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &#…...

AI一键生成短视频

AI一键生成推文短视频 阅读时长&#xff1a;10分钟 本文内容&#xff1a; 结合开源AI&#xff0c;一键生成短视频发布到常见的某音&#xff0c;某手平台&#xff0c;狠狠赚一笔 前置知识&#xff1a; 1.基本的 python 编程知识 2.chatGPT 使用过 3.stable diffution 使用过 成果…...

基于MATLAB长时间序列遥感数据分析(以MODIS数据处理为例)

MATLAB MATLAB是美国MathWorks公司出品的商业数学软件&#xff0c;用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人&#xff0c;控制系统等领域。 [1] MATLAB是matrix&laboratory两个词的组合&#xff0c;意为矩阵工厂&a…...

postgresql之内存池-AllocsetContext

一、简介 postgresql大部分的内存分配管理都是通过MemoryContext进行操作的&#xff0c; 多个相关的MemoryContext构成了一个树型结构&#xff0c; 多个树构成了一个森林。 实现了三种MemoryContext: SlabContextGenerationContextAllocSetContext 使用全局变量CurrentMemo…...

QT 使用单例模式

目录 1. 单例模式介绍 2.单例模式实现 1. 单例模式介绍 有些时候我们在做 qt 项目的时候,要用到很多类. 例如我们用到的类有 A,B,C,D. 其中,A 是 B,C,D 中都需要用到的类,A 类非常的抢手. 但是,A 类非常的占内存,定义一个 A 对象需要 500M 内存,假如在 B,C,D 中都定义一个 A 类…...

Ender3V2S1切片器脚本配置指南:优化3D打印效果的完整教程

Ender3V2S1切片器脚本配置指南&#xff1a;优化3D打印效果的完整教程 【免费下载链接】Ender3V2S1 This is optimized firmware for Ender3 V2/S1 3D printers. 项目地址: https://gitcode.com/gh_mirrors/en/Ender3V2S1 Ender3V2S1是一款备受欢迎的3D打印机&#xff0c…...

EZSwiftExtensions 性能优化技巧:让你的扩展运行更快更稳定

EZSwiftExtensions 性能优化技巧&#xff1a;让你的扩展运行更快更稳定 【免费下载链接】EZSwiftExtensions :smirk: How Swift standard types and classes were supposed to work. 项目地址: https://gitcode.com/gh_mirrors/ez/EZSwiftExtensions EZSwiftExtensions …...

避开SAP记账第一个坑:F-02凭证录入的5个细节与FS10N对账技巧

SAP财务实操避坑指南&#xff1a;F-02凭证录入的5个关键细节与FS10N高效对账技巧 刚接触SAP FI模块的中级用户&#xff0c;往往在完成基础培训后信心满满地开始独立操作&#xff0c;却在F-02凭证录入时频频踩坑。这些看似简单的字段选择背后&#xff0c;隐藏着财务逻辑与系统设…...

揭秘100.64.0.0/10:运营商级NAT如何重塑IPv4网络格局

1. 100.64.0.0/10&#xff1a;这个神秘IP段到底是什么&#xff1f; 第一次在路由器后台看到100.64.0.1这个IP时&#xff0c;我整个人都懵了——这既不是常见的192.168局域网地址&#xff0c;也不是公网IP。就像发现自家门牌号突然变成了酒店房间号&#xff0c;这种违和感促使我…...

QMK Toolbox终极指南:从零开始掌握键盘固件刷写的完整教程

QMK Toolbox终极指南&#xff1a;从零开始掌握键盘固件刷写的完整教程 【免费下载链接】qmk_toolbox A Toolbox companion for QMK Firmware 项目地址: https://gitcode.com/gh_mirrors/qm/qmk_toolbox QMK Toolbox是机械键盘爱好者的必备神器&#xff0c;这款开源工具集…...

新手友好!Qwen3-ASR-1.7B镜像使用全攻略:从安装到实战

新手友好&#xff01;Qwen3-ASR-1.7B镜像使用全攻略&#xff1a;从安装到实战 1. 为什么选择Qwen3-ASR-1.7B&#xff1f; 语音识别技术正在改变我们处理音频内容的方式。Qwen3-ASR-1.7B作为阿里云通义千问团队开发的开源语音识别模型&#xff0c;在识别精度和语言支持方面表现…...

GIMP Resynthesizer完整教程:掌握纹理合成与图像修复的核心技术

GIMP Resynthesizer完整教程&#xff1a;掌握纹理合成与图像修复的核心技术 【免费下载链接】resynthesizer Suite of gimp plugins for texture synthesis 项目地址: https://gitcode.com/gh_mirrors/re/resynthesizer 当你面对一张需要修复的老照片&#xff0c;或者需…...

突破限制与全版本支持:MediaCreationTool.bat重新定义Windows安装介质制作

突破限制与全版本支持&#xff1a;MediaCreationTool.bat重新定义Windows安装介质制作 【免费下载链接】MediaCreationTool.bat Universal MCT wrapper script for all Windows 10/11 versions from 1507 to 21H2! 项目地址: https://gitcode.com/gh_mirrors/me/MediaCreatio…...

Jetson平台高温警告静默指南:深入解析notify_disable与nvpmodel_indicator.py

1. 为什么需要关闭Jetson的高温警告 当你把Jetson设备用在嵌入式系统或者工业自动化场景时&#xff0c;那个频繁弹出的"Caution - Hot surface. Do not touch"警告可能会让人抓狂。我去年在一个智能监控项目上就遇到过这种情况——设备在户外机箱里持续运行&#xff…...

Phi-4-mini-reasoning轻量模型安全:对抗提示注入攻击的防护策略

Phi-4-mini-reasoning轻量模型安全&#xff1a;对抗提示注入攻击的防护策略 1. 模型简介与安全挑战 Phi-4-mini-reasoning是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理能力。作为Phi-4模型家族成员&#xff0c;它支持128K令牌的超长…...