废话不多说直接上代码!!!
<template>
<div class="noticebar" v-if="announces.length">
<div class="notice-img">
<img class="notice-img" src="../../static/images/ic_notice.png" alt="" />
</div>
<ul class="notice-list">
<li
v-for="(item, index) in announces"
:key="item.title"
:class="!index && play ? 'toUp' : ''"
@click="onNotice(item.resUrl)"
>
{{ item.title }}
</li>
</ul>
<div class="img-right">
<img class="img-right" src="../../static/images/ic_wish_fill_right.png" alt="" />
</div>
</div>
</template>
<script>
export default {
name: "noticeBar",
props: {
announces: {
type: Array,
default() {
return [
{
resUrl: "https://www.baidu.com/",
title: "百度",
},
];
},
},
},
data() {
return {
play: false, // 是否开始播放
};
},
activated() {
setInterval(this.startPlay, 4000);
},
methods: {
// 控制文案轮播
startPlay() {
let that = this;
that.play = true; //开始播放
setTimeout(() => {
that.announces.push(that.announces[0]); //将第一条数据塞到最后一个
that.announces.shift(); //删除第一条数据
that.play = false; //暂停播放
}, 500);
},
// 点击"公告"跳转
onNotice(url) {
console.log("公告url", url);
this.$emit("onInfoTo", {
url,
title: "资讯详情",
});
},
},
};
</script>
<style lang="less" scoped>
.noticebar {
width: 100%;
background: #fff;
padding: 0.3rem 0.24rem;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.3rem;
}
.toUp {
transform: translateY(-20px);
transition: all 0.5s linear;
}
.notice-list {
display: block;
list-style: none;
width: 100%;
overflow: hidden;
height: 20px;
}
.notice-list li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notice-img {
width: 0.72rem;
margin-right: 0.24rem;
}
.img-right {
width: 0.16rem;
}
li {
height: 20px;
line-height: 20px;
}
</style>