Vue 动态数据滚动

使用Vue动态滚动（上下滚动）显示将要展示的讯息。

代码分析：
1.设置固定样式的框架内容
2.设置红色字体内容是动态变化的
3.滚动效果为向上滚动

效果演示：

此效果图的数据是不停滚动变化的
在这里插入图片描述
第二张效果图

代码演示：

注意：引入vue.min.js架包

CSS样式

<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: #b3effe;display: flex;box-sizing: border-box;
}.marquee_title {padding: 0 20px;height: 30px;font-size: 14px;border-right: 1px solid #d8d8d8;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>

Body内容

<body><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>今天</span><span class="red">{{item.name}}</span><span>特价，仅需</span><span class="red"> {{item.value}}</span><span>元一斤，赶快抢购吧！！！</span></li></ul></div></div>
</div>
</body>

Vue内容

<script type="text/javascript">const vm = new Vue({el: ".vueBox",data: {animate: false,marqueeList: [{name: '苹果',value: '1.68',},{name: '橘子',value: '0.9',},{name: '香蕉',value: '2.58',},{name: '猕猴桃',value: '3.2',}]},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>

如果对上面分步代码有点不理解的话请看下面整体代码。

整体代码演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js"></script>
<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: #b3effe;display: flex;box-sizing: border-box;
}.marquee_title {padding: 0 20px;height: 30px;font-size: 14px;border-right: 1px solid #d8d8d8;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><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>今天</span><span class="red">{{item.name}}</span><span>特价，仅需</span><span class="red"> {{item.value}}</span><span>元一斤，赶快抢购吧！！！</span></li></ul></div></div>
</div>
</body>
<script type="text/javascript">const vm = new Vue({el: ".vueBox",data: {animate: false,marqueeList: [{name: '苹果',value: '1.68',},{name: '橘子',value: '0.9',},{name: '香蕉',value: '2.58',},{name: '猕猴桃',value: '3.2',}]},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>
</html>