初始样子/完成样子是后侧列表循环
<!-- 首页滚动新闻 -->
<template>
<div class="home-news">
<div class="news">
<img
src="https://cartier-cdn.cartier.cn/Library/2021-08-30/163030622710518.jpg"
alt=""
/>
//通过设置ref,获取dom元素
<ul ref="news" :class="{ animate: flag }">
<li v-for="item in news" :key="item.id">{{ item.title }}</li>
</ul>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
settime: null,
flag: false,
news: [
{
id: 1,
title: "与爱相伴,勇敢前行",
},
{
id: 2,
title: "多变魅力,野性优雅",
},
{
id: 3,
title: "新生有为,方圆无界",
},
{
id: 4,
title: "贴心服务,非凡体验",
},
],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
scrollNews() {
//通过设置ref获取dom元素
//console.log(this.$refs.news);
let newsul = this.$refs.news;
//ul向上移动一个title
newsul.style.top = "-4rem";
//设置一个动画 动画开始
this.flag = !this.flag;
//设置个定时器,循环滚动
setTimeout(() => {
// 向末尾添加第一条数据
this.news.push(this.news[0]);
//删除第一条数据
this.news.shift();
//退回到top等于0
newsul.style.top = "0rem";
//动画结束
this.flag = !this.flag;
}, 500);
},
},
mounted() {
// 为什么设置data?好找,销毁组件的时候
this.settime = setInterval(this.scrollNews, 3000);
},
destroyed() {
//一定要清除定时器
clearInterval(this.settime);
}, //生命周期 - 销毁完成
};
</script>
<style lang='less'>
.news {
width: 100%;
height: 40rem;
margin-top: 2rem;
overflow: hidden;
img {
float: left;
width: 60%;
height: 4rem;
}
.animate {
transition: all 1s linear;
}
ul {
position: relative;
float: left;
width: 40%;
overflow: hidden;
height: 4rem;
li {
line-height: 4rem;
margin-left: 2rem;
}
}
}
</style>
有人看的话,细讲~~