基于vue实现新闻自下往上滚动效果(示例代码) 基于vue实现新闻自下往上滚动

文章图片

如图所示自下往上滚动鼠标放上暂停滚动鼠标移出继续滚动
一、html：

文章图片
{{ item.title }}查看>
x

文章图片
更多内容可扫码查看

二.css动画

.newsList {width: 90%; margin: 10px auto; height: 90px; overflow: hidden; font-size: 12px; font-family: PingFang SC; font-weight: 400; line-height: 17px; color: #ffffff; /* background-color: red; */}.anim {transition: all 1s; margin-top: -30px; }#con1 li {list-style: none; line-height: 30px; height: 30px; }

三、js代码

mounted() {this.timer=setInterval(this.scroll, 2000); this.$api.newsList({limit:12,page:1}).then(res=>{this.items=res.data.records})},methods: {scroll() {this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置truesetTimeout(() => {//这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的this.items.shift(); //删除数组的第一个元素this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动}, 1000); },getCode(qrCode){this.code=qrCodethis.codeShow=true},mouseOver(){console.log('鼠标悬停')// this.animate = false; clearInterval(this.timer)},mouseOut(){// this.animate = true; this.timer=setInterval(this.scroll, 2000); }},

【基于vue实现新闻自下往上滚动效果(示例代码)】到此这篇关于vue新闻自下往上滚动效果的文章就介绍到这了,更多相关vue新闻滚动效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！