Vue實現簡單的無縫滾動
阿新 • • 發佈：2018-12-17
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue實現無縫滾動</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> * { margin: 0; padding: 0; } #box { width: 300px; height: 124px; line-height: 30px; overflow: hidden; padding-left: 30px; border: 1px solid black; transition: all 0.5s; } .scroll { transition: all 0.5s; margin-top: -34px; } #con1 li { list-style: none; line-height: 34px; height: 34px; } .active { color: red; } </style> </head> <body> <div id="app"> <div id="box"> <ul :class="{scroll:animate==true}"> <li v-for='(item,index) in items' :key="index" @click="item.active = !item.active" :class="{'active':item.active}">{{item.name}}</li> </ul> </div> </div> <script> new Vue({ el: "#app", data: { animate: false, items: [{ name: "1馬雲", active: false }, { name: "2雷軍", active: false }, { name: "3張珊", active: false }, { name: "4李思", active: false }, { name: "5王武", active: false }, { name: "6趙柳", active: false }, ] }, mounted() { setInterval(this.listScroll, 4500); }, methods: { listScroll() { if (this.items.length >= 5) { this.animate = true setTimeout(() => { this.items.push(this.items[0]); this.items.shift(); this.animate = false; // 這個地方如果不把animate 取反會出現訊息回滾的現象，此時把ul 元素的過渡屬性取消掉就可以完美實現無縫滾動的效果了 }, 500) } } } }); </script> </body> </html>