Vue中實現資料列表無縫輪播
阿新 • • 發佈：2022-03-28
類似這種滾動輪播效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>vue.js動態文字滾動公告程式碼</title> 6 <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> 7 <style> 8 div, 9 ul, 10 li, 11 span, 12 img { 13 margin: 0; 14 padding: 0; 15 display: flex; 16 box-sizing: border-box; 17 } 18 19 .marquee { 20 width: 100%; 21 height: 308px; 22 color: #3a3a3a; 23 box-sizing:border-box; 24 } 25 26 .marquee_box { 27 display: block; 28 position: relative; 29 width: 60%; 30 /* 佔四分之三的高度 */ 31 height: 86%; 32 overflow: hidden; 33 } 34 35 .marquee_list { 36 display: block; 37 width:100%; 38 position: absolute; 39 top: 0; 40 left: 0; 41 } 42 43 .marquee_top { 44 transition: all 0.5s ease-out; 45 margin-top: -44px; 46 } 47 48 .marquee_list li { 49 height: 44px; 50 line-height: 44px; 51 font-size: 14px; 52 padding-left: 20px; 53 border-bottom: 1px solid rgb(199, 199, 199); 54 } 55 56 .marquee_list li span { 57 padding: 0 2px; 58 } 59 60 .red { 61 color: #ff0101; 62 } 63 </style> 64 </head> 65 <body> 66 <div class="vueBox"> 67 <div class="marquee"> 68 <div class="marquee_box"> 69 <ul :class="['marquee_list', animate ? 'marquee_top' : '']"> 70 <li 71 v-for="(item, index) in marqueeList" 72 :key="index" 73 > 74 <span>{{item.name}}</span> 75 <span>在</span> 76 <span class="red"> {{item.city}}</span> 77 <span>殺敵</span> 78 <span class="red"> {{item.amount}}</span> 79 <span>萬</span> 80 </li> 81 </ul> 82 </div> 83 </div> 84 </div> 85 86 <script type="text/javascript"> 87 const vm = new Vue({ 88 el: ".vueBox", 89 data: { 90 animate: false, 91 marqueeList: [ 92 { 93 name: "1軍", 94 city: "北京", 95 amount: "10", 96 src: "../img/冠軍.png" 97 }, 98 { 99 name: "2軍", 100 city: "上海", 101 amount: "20", 102 src: "../img/亞軍.png" 103 }, 104 { 105 name: "3軍", 106 city: "廣州", 107 amount: "30", 108 src: "../img/季軍.png" 109 }, 110 { 111 name: "4軍", 112 city: "重慶", 113 amount: "40", 114 }, 115 { 116 name: "5軍", 117 city: "天津", 118 amount: "50", 119 }, 120 { 121 name: "6軍", 122 city: "西安", 123 amount: "60", 124 }, 125 { 126 name: "7軍", 127 city: "武漢", 128 amount: "70", 129 }, 130 { 131 name: "8軍", 132 city: "南昌", 133 amount: "80", 134 } 135 ] 136 }, 137 created: function() { 138 setInterval(this.showMarquee, 5000); 139 }, 140 methods: { 141 showMarquee: function() { 142 this.animate = true; 143 setTimeout(() => { 144 // if (this.marqueeList.length % 2 != 0) { 145 // } 146 this.marqueeList.push(this.marqueeList[0]); 147 this.marqueeList.shift(); 148 this.animate = false; 149 }, 500); 150 } 151 } 152 }); 153 </script> 154 </body> 155 </html>