VUE 上下轮播组件
在做项目的时候,遇到了实现上下播放新闻的功能,所以在次记录下实现原理<template><div :style="{height:60 + 'px'}" class="rollScreen_container" id="rollScreen_container"><di
·
在做项目的时候,遇到了实现上下播放新闻的功能,
所以在次记录下实现原理
<template>
<div :style="{height:60 + 'px'}" class="rollScreen_container" id="rollScreen_container">
<div class="nav">
<div class="nav_left">
<img src="@/assets/laba.png" alt="">
<span>新媒公告</span>
</div>
<div class="nav_right">
<ul class="nav_ct" :style="transform" v-if="notice.length>0">
<li v-for="(item,index) in notice" :key="index">{{item}}</li>
<li>{{notice[0]}}</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
height: {
default: 60,
type: Number
},
lineNum: {
default: 3,
type: Number
},
notice: {
default: function() {
return [
"我们来自同一个世界就发哦到附近",
"我们都有爱的就发哦的及哦啊接发减肥减肥骄傲",
"laizjfofjaodjfoajfdo"
];
},
type: Array
}
},
data: function() {
return {
num: 0
};
},
computed: {
transform: function() {
return "transform:translateY(-" + this.num * this.height + "px);";
}
},
created: function() {
this.init();
},
methods: {
init() {
let that = this;
that.num += 1;
let timeId = setInterval(function() {
if (that.num == that.notice.length) { //判断num是否大于或等于notice的长度,让num为0,回到七点
that.num = 0;
clearInterval(timeId); //清除定时器,防止时间停留两个3秒
that.init();
} else {
that.num += 1;
}
}, 3000);
}
}
};
</script>
<style lang="less" scoped>
.rollScreen_container {
width: 1200px;
margin: 0 auto;
margin-bottom: 20px;
position: relative;
}
.nav {
width: 1200px;
margin: 0 auto;
height: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
background: #fff;
padding: 0 40px;
box-sizing: border-box;
margin-bottom: 20px;
.nav_left {
display: flex;
justify-content: flex-start;
align-items: center;
img {
width: 25px;
height: 20px;
}
span {
font-size: 18px;
font-weight: 600;
color: #ec0504;
margin-left: 20px;
}
}
.nav_right {
width: 80%;
height: 60px;
overflow: hidden;
.nav_ct {
width: 100%;
margin-left: 60px;
li {
position: relative;
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 15px;
padding-left: 10px;
box-sizing: border-box;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:before {
content: "";
width: 5px;
height: 5px;
margin-right: 10px;
border-radius: 50%;
background: #000;
}
&:hover {
cursor: pointer;
}
}
}
}
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)