Vue中实现数据列表无缝轮播
生活随笔
收集整理的這篇文章主要介紹了
Vue中实现数据列表无缝轮播
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現效果:
鏈接
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>vue.js動態文字滾動公告代碼</title><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script><style>div,ul,li,span,img {margin: 0;padding: 0;display: flex;box-sizing: border-box;}.marquee {width: 100%;height: 308px;color: #3a3a3a;box-sizing: border-box;}.marquee_box {display: block;position: relative;width: 60%;/* 占四分之三的高度 */height: 86%;overflow: hidden;}.marquee_list {display: block;width: 100%;position: absolute;top: 0;left: 0;}.marquee_top {transition: all 0.5s ease-out;margin-top: -44px;}.marquee_list li {height: 44px;line-height: 30px;font-size: 14px;padding-left: 20px;}.marquee_list li span {padding: 0 2px;}.red {color: #ff0101;}</style></head><bodystyle="width: 100vw; height: 100vh; padding: 10px; box-sizing: border-box;"><div class="vueBox"><div class="marquee"><div class="marquee_box"><ul class="marquee_list" :class="{marquee_top:animate}"><liv-for="(item, index) in marqueeList":key="index":style="{background: item.background, display: 'flex', 'justify-content': 'space-between', 'align-items': 'center'}"><span>{{item.name}}</span><span>在</span><span class="red"> {{item.city}}</span><span>殺敵</span><span class="red"> {{item.amount}}</span><span>萬</span><span><img:src="item.src?item.src: ''"style="width: 15px; height: 15px;"alt=""/></span></li></ul></div></div></div><script type="text/javascript">const vm = new Vue({el: ".vueBox",data: {animate: false,marqueeList: [{name: "1軍",city: "北京",amount: "10",background: "rgba(0,0,0,.4)",src: "../img/冠軍.png"},{name: "2軍",city: "上海",amount: "20",background: "rgba(0,0,0,.6)",src: "../img/亞軍.png"},{name: "3軍",city: "廣州",amount: "30",background: "rgba(0,0,0,.4)",src: "../img/季軍.png"},{name: "4軍",city: "重慶",amount: "40",background: "rgba(0,0,0,.6)"},{name: "5軍",city: "天津",amount: "50",background: "rgba(0,0,0,.4)"},{name: "6軍",city: "西安",amount: "60",background: "rgba(0,0,0,.6)"},{name: "7軍",city: "武漢",amount: "70",background: "rgba(0,0,0,.4)"},{name: "8軍",city: "南昌",amount: "80",background: "rgba(0,0,0,.6)"}]},created: function() {setInterval(this.showMarquee, 2000);},methods: {showMarquee: function() {this.animate = true;setTimeout(() => {if (this.marqueeList.length % 2 != 0) {this.marqueeList[0]["background"] =this.marqueeList[0]["background"] === "rgba(0,0,0,.4)"? "rgba(0,0,0,.6)": "rgba(0,0,0,.4)";}this.marqueeList.push(this.marqueeList[0]);this.marqueeList.shift();this.animate = false;}, 500);}}});</script></body> </html>總結
以上是生活随笔為你收集整理的Vue中实现数据列表无缝轮播的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Request请求：Failed to
- 下一篇： 【实用】C#测试web服务是否可用