vue项目里手动写一个走马灯效果

已于 2023-08-17 10:27:01 修改
阅读量710 收藏
点赞数
分类专栏： vue2实战记录 文章标签： vue.js javascript elementui
于 2023-05-19 16:38:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/130769093
版权
本文介绍如何在Vue项目中实现自定义走马灯效果，结合ElementUI组件，处理后端返回的派出所和警务人员名单数据，进行数据分组和折叠处理。使用v-for指令和数组切片实现轮播，同时展示了如何处理鼠标事件和数据处理以达到轮播及提示效果。
摘要由CSDN通过智能技术生成

我们知道elementUI里有个走马灯的组件，如下图，每隔指定的时间，就可以实现轮播切换
在这里插入图片描述
现在项目需求是顶部的派出所和下面的警务人员名单都是后端接口返回的数据，然后派出所是个可以单击选中且有走马灯效果的tab导航，效果如下：
在这里插入图片描述
在这里插入图片描述

后端返回的数据结构如下：

 policeList: [
        {
了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
专栏目录
订阅专栏
vue 实现走马灯效果
10-16
主要介绍了vue 实现走马灯效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现走马灯效果
weixin_52165603的博客
08-01 1813
vue实现动态走马灯效果
vue大屏轮播（跑马灯）实现思路
博客
07-22 1198
大屏轮播滚动，跑马灯，无缝滚动
vue走马灯
weixin_45439379的博客
11-11 800
vue走马灯 文章目录vue走马灯 好用
vue实现文字跑马灯效果
12-04
使用 vue 绑定style属性实现文字跑马灯效果。。。。。。。
Vue3走马灯（Carousel）
Mr Dear的博客
04-04 6999
走马灯图片轮播组件，常用于一组图片或卡片轮播，支持：箭头导航；显示指示点；自动轮播；设置分页指示点位置；垂直切换；移入暂停；自定义过渡效果；自定义滑动动画；自定义样式；总之，功能丰富，简单易用😁😁
Vue 小实例 跑马灯效果
weixin_30247781的博客
07-23 928
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
vue实现简单的走马灯效果
前端小园丁
11-14 1381
效果图 index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本跑马灯效果</title> <script src="vue.js" type="text/javascrip...
Vue · 走马灯效果
chez-moi
03-06 602
步骤分析： 1、给开始按钮绑定一个事件 2、在按钮的事件处理函数中：拿到msg字符串，然后调用字符串的substring进行截取。第一个字符取出追加到最后的位置 3、为实现走马灯的动态效果，把步骤2的代码放到定时器中，按下按钮后可以自行走马灯 <!DOCTYPE html> <html> <head> <meta charset...
vue实现简单跑马灯效果
11-20
本文实例为大家分享了vue实现简单跑马灯效果的具体代码，供大家参考，具体内容如下 如下图片，会自行向 上“滚动” 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯 </title> [removed][removed] <style> div, ul, li, img { margin: 0; padding: 0; box-sizing:
Vue实现跑马灯效果
10-15
主要为大家详细介绍了Vue实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现文字横向无缝走马灯组件效果的实例代码
12-29
marquee标签已经废弃了，只能手动实现文字走马灯样式 基于vue组件开发 <div class=wrap> // 外框，固定宽度 <div id=box> // 内部滚动框 <div id=marquee>{{text}}</div> //展示的文字 <div id=copy></div> /...
Vue.js轮播图走马灯代码实例（全）
10-17
在本实例中，我们将讨论如何使用Vue.js实现一个轮播图走马灯效果。轮播图是一种常见的网页元素，通常用于展示多张图片或内容，通过自动或手动切换显示其中一张。在Vue.js中，我们可以利用其响应式数据绑定、指令和...
antd：手写走马灯vue组件
最新发布
yyyyyyyyyyy_9的博客
09-03 329
在使用ant-design-vue做走马灯的时候，封装的组件的自由度太低，难以实现想要的效果，于是本人自己写了一个走马灯组件，以方便代码复用。本文将介绍如何在vue框架中，使用ant-design-vue手动实现走马灯组件效果。
各种跑马灯效果（水平、垂直）
07-06
跑马灯效果是一种常见的动态视觉展示方式，在UI设计和编程领域中广泛应用，尤其在移动应用、网站设计和游戏开发中尤为常见。这种效果通常表现为文字或图像在屏幕边缘循环滚动，仿佛是LED显示屏上的信息流动，因此...
vue实现 marquee(走马灯)
编写博客，学习交流
01-16 1440
【代码】vue实现 marquee(走马灯)
帮我写一个vue项目
02-06
非常抱歉，我无法帮你写一个 Vue 项目。但是我可以给你一些建立 Vue 项目的建议。 首先，你需要安装 Node.js 和 npm（Node.js 的包管理器）。然后，使用 npm 安装 Vue 的脚手架工具 vue-cli。 ``` npm install -g ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值