电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue實現公告欄文字上下滾動效果的示例代碼

瀏覽:59日期:2023-01-13 09:21:14

本文詳細的介紹了vue實現公告欄文字上下滾動效果的示例代碼,分享給大家,具體入如下:

代碼實現:

在項目結構的components中新建text-scroll.vue文件

<template> <div class='text-container'> <transition class='' name='slide' mode='out-in'> <p :key='text.id'>{{text.val}}</p> </transition> </div></template><script>export default { name: ’TextScroll’, props: { dataList: { type: Array, default() { return []; }, }, }, data() { return { count: 0, // 當前索引 intervalId: null, // 定時器ID playTime: 2000, // 定時器執(zhí)行間隔 }; }, computed: { text() { return { id: this.count, val: this.dataList[this.count], }; }, }, created() { this.intervalId = setInterval(() => { // 定義定時器 this.getText(); }, this.playTime); }, methods: { getText() { const len = this.dataList.length; // 獲取數組長度 if (len === 0) { return; // 當數組為空時,直接返回 } if (this.count === len - 1) { // 當前為最后一個時 this.count = 0; // 從第一個開始 } else { this.count++; // 自增 } }, }, destroyed() { clearInterval(this.intervalId); // 清除定時器 },};</script><style scoped>.text-container{ font-size: 14px; color: #F56B6B; margin-right: 20px; height: 60px;}.text { text-align: right; margin: auto 0;}.slide-enter-active, .slide-leave-active { transition: all 1s;}.slide-enter{ transform: translateY(40px);}.slide-leave-to { transform: translateY(-40px);}</style>

在header-bar組件使用

<text-scroll :dataList='noticeList'></text-scroll>

分析

transition標簽

vue實現公告欄文字上下滾動效果的示例代碼

這里是動態(tài)組件

官方文檔:https://cn.vuejs.org/v2/guide/transitions.html

為什么用setInterval,而不是setTimeout

setInterval是循環(huán)執(zhí)行,setTimeout是延遲執(zhí)行。我們這里要的是setTimeout循環(huán)執(zhí)行。通過嵌套setTimeout可以實現循環(huán),但是每次都會注冊一個計時器,然后時間上也是需要等當前setTimeout執(zhí)行完再延遲比如說兩秒執(zhí)行,實際上就不只2s。

什么情況下setTimeout嵌套可以解決 setInterval 解決不了的問題 當計時器是高耗時的計算或者dom操作時,時間大于延遲時間

到此這篇關于vue實現公告欄文字上下滾動效果的示例代碼的文章就介紹到這了,更多相關vue 公告欄文字上下滾動 內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 六维力传感器_三维力传感器_二维力传感器-南京神源生智能科技有限公司 | 网站优化公司_北京网站优化_抖音短视频代运营_抖音关键词seo优化排名-通则达网络 | 旅游规划_旅游策划_乡村旅游规划_景区规划设计_旅游规划设计公司-北京绿道联合旅游规划设计有限公司 | 台湾阳明固态继电器-奥托尼克斯光电传感器-接近开关-温控器-光纤传感器-编码器一级代理商江苏用之宜电气 | 重庆磨床过滤机,重庆纸带过滤机,机床伸缩钣金,重庆机床钣金护罩-重庆达鸿兴精密机械制造有限公司 | 光谱仪_积分球_分布光度计_灯具检测生产厂家_杭州松朗光电【官网】 | 伸缩器_伸缩接头_传力接头-巩义市润达管道设备制造有限公司 | 智慧水务|智慧供排水利信息化|水厂软硬件系统-上海敢创 | 定硫仪,量热仪,工业分析仪,马弗炉,煤炭化验设备厂家,煤质化验仪器,焦炭化验设备鹤壁大德煤质工业分析仪,氟氯测定仪 | 大型冰雕-景区冰雕展制作公司,3D创意设计源头厂家-[赛北冰雕] | 氢氧化钾厂家直销批发-济南金昊化工有限公司 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 云南标线|昆明划线|道路标线|交通标线-就选云南云路施工公司-云南云路科技有限公司 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 灌木树苗-绿化苗木-常绿乔木-价格/批发/基地 - 四川成都途美园林 | 粉末包装机-给袋式包装机-全自动包装机-颗粒-液体-食品-酱腌菜包装机生产线【润立机械】 | 优秀的临床医学知识库,临床知识库,医疗知识库,满足电子病历四级要求,免费试用 | 金刚网,金刚网窗纱,不锈钢网,金刚网厂家- 河北萨邦丝网制品有限公司 | 合肥钣金加工-安徽激光切割加工-机箱机柜加工厂家-合肥通快 | 智慧钢琴-电钢琴-便携钢琴-数码钢琴-深圳市特伦斯乐器有限公司 | CTAB,表面活性剂1631溴型(十六烷基三甲基溴化铵)-上海升纬化工原料有限公司 | 垃圾处理设备_餐厨垃圾处理设备_厨余垃圾处理设备_果蔬垃圾处理设备-深圳市三盛环保科技有限公司 | 精密钢管,冷拔精密无缝钢管,精密钢管厂,精密钢管制造厂家,精密钢管生产厂家,山东精密钢管厂家 | 工业插头-工业插头插座【厂家】-温州罗曼电气 | 风化石头制砂机_方解石制砂机_瓷砖石子制砂机_华盛铭厂家 | 北京易通慧公司从事北京网站优化,北京网络推广、网站建设一站式服务商-北京网站优化公司 | 无菌水质袋-NASCO食品无菌袋-Whirl-Pak无菌采样袋-深圳市慧普德贸易有限公司 | 选矿设备-新型重选设备-金属矿尾矿重选-青州冠诚重工机械有限公司 | 搪瓷搅拌器,搪玻璃搅拌器,搪玻璃冷凝器_厂家-淄博越宏化工设备 | 青岛空压机,青岛空压机维修/保养,青岛空压机销售/出租公司,青岛空压机厂家电话 | 定做大型恒温循环水浴槽-工业用不锈钢恒温水箱-大容量低温恒温水槽-常州精达仪器 | 深圳高新投三江工业消防解决方案提供厂家_服务商_园区智慧消防_储能消防解决方案服务商_高新投三江 | 开锐教育-学历提升-职称评定-职业资格培训-积分入户 | 浙江自考_浙江自学考试网| 自动气象站_气象站监测设备_全自动气象站设备_雨量监测站-山东风途物联网 | 上海小程序开发-上海小程序制作公司-上海网站建设-公众号开发运营-软件外包公司-咏熠科技 | 溶氧传感器-pH传感器|哈美顿(hamilton) | 博莱特空压机|博莱特-阿特拉斯独资空压机品牌核心代理商 | 上海网站建设-上海网站制作-上海网站设计-上海做网站公司-咏熠软件 | 凝胶成像系统(wb成像系统)百科-上海嘉鹏 |