本文主要是介绍vue实现公告上下滚动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue文字滚动</title><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: #ffe4ca;display: flex;box-sizing: border-box;
}.marquee_title {padding: 0 20px;height: 30px;font-size: 14px;border-right: 1px solid #fff;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>
<h3 style="line-height: 50px;text-align: center">vue文字滚动</h3>
<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>{{item.name}}</span><span>-</span><span class="red"> {{item.city}}</span><span>销售</span><span class="red"> {{item.amount}}</span><span>亿</span></li></ul></div></div>
</div><script src="https://www.jq22.com/jquery/vue.min.js"></script>
<script type="text/javascript">const vm = new Vue({el: ".vueBox",data: {animate: false,marqueeList: [{name: '水果',city: '北京',amount: '320'},{name: '饮料',city: '上海',amount: '470'},{name: '腐乳',city: '广州',amount: '970'},{name: '蛋糕',city: '重庆',amount: '10'}]},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></body>
</html>
这篇关于vue实现公告上下滚动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
