Vue 动态数据滚动
生活随笔
收集整理的這篇文章主要介紹了
Vue 动态数据滚动
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
使用Vue動態(tài)滾動（上下滾動）顯示將要展示的訊息。
代碼分析：
1.設(shè)置固定樣式的框架內(nèi)容
2.設(shè)置紅色字體內(nèi)容是動態(tài)變化的
3.滾動效果為向上滾動
效果演示：
此效果圖的數(shù)據(jù)是不停滾動變化的
第二張效果圖
代碼演示：
注意：引入vue.min.js架包
如果對上面分步代碼有點不理解的話請看下面整體代碼。
整體代碼演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.min.js"></script> <style> div, ul, li, span, img {margin: 0;padding: 0;display: flex;box-sizing: border-box; } .marquee {width: 100%;height: 50px;align-items: center;color: #3A3A3A;background-color: #b3effe;display: flex;box-sizing: border-box; }.marquee_title {padding: 0 20px;height: 30px;font-size: 14px;border-right: 1px solid #d8d8d8;align-items: center; }.marquee_box {display: block;position: relative;width: 60%;height: 30px;overflow: hidden; }.marquee_list {display: block;position: absolute;top: 0;left: 0; } .marquee_top {transition: all 0.5s;margin-top: -30px }.marquee_list li {height: 30px;line-height: 30px;font-size: 14px;padding-left: 20px; }.marquee_list li span {padding: 0 2px; }.red {color: #FF0101; }</style></head> <body><div class="vueBox"><div class="marquee"><div class="marquee_title"><span>最新訊息</span></div><div class="marquee_box"><ul class="marquee_list" :class="{marquee_top:animate}"><li v-for="(item, index) in marqueeList"><span>今天</span><span class="red">{{item.name}}</span><span>特價，僅需</span><span class="red"> {{item.value}}</span><span>元一斤，趕快搶購吧！！！</span></li></ul></div></div> </div> </body> <script type="text/javascript">const vm = new Vue({el: ".vueBox",data: {animate: false,marqueeList: [{name: '蘋果',value: '1.68',},{name: '橘子',value: '0.9',},{name: '香蕉',value: '2.58',},{name: '獼猴桃',value: '3.2',}]},created: function () {setInterval(this.showMarquee, 2000)},methods: {showMarquee: function () {this.animate = true;setTimeout(()=>{this.marqueeList.push(this.marqueeList[0]);this.marqueeList.shift();this.animate = false;},500)},}}); </script> </html>掃一掃關(guān)注我的公眾號獲取更多資訊呦！！！
總結(jié)
以上是生活随笔為你收集整理的Vue 动态数据滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据增强_imgaug图像数据增强必备工
- 下一篇： html5倒计时秒杀怎么做,vue 设