<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>scroll</title> <style> .animatedTop { transition: all 0.5s; margin-top: -1.7em; } .scroll { width: 100%; background: #ffdf72; height: 50px; overflow: hidden; } ul, li { padding: 0; margin: 0; } li { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px; } </style></head><body> <div id="app"> <div class="scroll"> <ul :class="{animatedTop}"> <li v-for="(item, index) in scrollList" :key="index">{{item.title}}</li> </ul> </div> </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script> new Vue({ el: '#app', data: { animatedTop: false, scrollList: [ { id: 0, title: '故宫旅游指南，逛89遍紫禁城才能发现的绝佳赏花线路' }, { id: 1, title: '吃货必看西安寻吃手册|“老西安”告诉你如何打卡最地道美食' }, { id: 2, title: '【无锡旅游攻略】江南小城无限好，太湖明珠在无锡' }, { id: 3, title: '【镜头里藏着另一个世界】泰国曼谷、大城、素可泰小众景点摄影攻略' } ] }, methods: { showScroll() { this.animatedTop = true; setTimeout(() => { this.scrollList.push(this.scrollList[0]) this.scrollList.shift() this.animatedTop = false }, 500) } }, mounted() { setInterval(this.showScroll, 2000) } }) </script></body></html>
评论