基于vue实现新闻自下往上滚动效果(示例代码)
短信预约 -IT技能 免费直播动态提醒
如图所示自下往上滚动鼠标放上暂停滚动 鼠标移出继续滚动
一、html：
<div class="newsList" @mouseover="mouseOver" @mouseout="mouseOut">
<ul id="con1" ref="con1" :class="{ anim: animate == true }">
<li v-for="(item, key) in items" :key="key" class="newsItem">
<img class="lazy" data-src="../../assets/img/icon.png" alt="" style="margin-top:5px;width:20px;height:20px">
<span>{{ item.title }}</span>
<span @click="getCode(item.qrCode)">查看></span>
</li>
</ul>
<div class="showCode" v-if="codeShow">
<p style="text-align:right;padding-right:10px;cursor:pointer" @click="codeShow=false">x</p>
<img :class="lazy" data-src="code" alt="">
<p>更多内容可扫码查看</p>
</div>
</div>
二.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;
}
.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过渡动画，所以这里需要设置true
setTimeout(() => {
// 这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
this.items.shift(); //删除数组的第一个元素
this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
}, 1000);
},
getCode(qrCode){
this.code=qrCode
this.codeShow=true
},
mouseOver(){
console.log('鼠标悬停')
// this.animate = false;
clearInterval(this.timer)
},
mouseOut(){
// this.animate = true;
this.timer=setInterval(this.scroll, 2000);
}
},到此这篇关于vue新闻自下往上滚动效果的文章就介绍到这了,更多相关vue新闻滚动效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
