德持建设集团有限公司网站,有没有便宜做网站的 我要做个,中国建筑设计网站,外贸网站建设ppt模板下载这是很久以前项目中用到的功能#xff0c;目前要达到的效果是新闻逐条向上滚动#xff0c;没有使用第三方插件#xff0c;vue2版本的#xff0c;vue3可以自行改造#xff0c;适合新闻列表模块。后续也会出其他功能块#xff0c;每个功能块都很简洁#xff0c;复制粘贴就…这是很久以前项目中用到的功能目前要达到的效果是新闻逐条向上滚动没有使用第三方插件vue2版本的vue3可以自行改造适合新闻列表模块。后续也会出其他功能块每个功能块都很简洁复制粘贴就能用到项目中节约时间
代码如下
templatediv classnewsdiv :class{ anim: animate } mouseenterstop() mouseleaveup()divclickhandleClick(item)classnews_namev-foritem in newsList:keyitem.id{{ item.name }}/div/div/div
/template
script
export default {data() {return {timer: null,animate: false,newsList: [{ id: 1, name: 华为11111 },{ id: 2, name: Redmi K30 5G },{ id: 3, name: 小米CC9 Pro },{ id: 4, name: Redmi 8 },{ id: 5, name: Redmi 8A },{ id: 6, name: Redmi Note8 Pro },{ id: 7, name: Redmi Note8 },{ id: 8, name: Redmi Note8 },],};},mounted() {this.scrollUp(); // 开启滚动效果},methods: {// 查看详情handleClick(item) {console.log(item);},// 滚动scrollUp() {this.timer setInterval(() {this.animate true; // 向上滚动的时候需要添加动画setTimeout(() {this.newsList.push(this.newsList[0]); // 将数组的第一个元素添加到数组最后一个this.newsList.shift(); // 删除数组的第一个元素this.animate false;}, 500);}, 4000);},//鼠标移上去停止stop() {clearInterval(this.timer);},//鼠标离开继续up() {this.scrollUp();},},beforeDestroy() {this.stop();},
};
/script
style scoped
.news {width: 100%;height: 90px;background-color: #fff;margin-top: 50px;overflow: hidden;
}
.news_name {line-height: 30px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;transition: top 0.5s;
}
.anim {transition: all 0.5s;margin-top: -30px;
}
/style
