vue新闻轮播简单实现
需求:如图左边是图片,右边是文字,时间间隔n秒自动播放下一则新闻
前言:所想所学所感记录下来,供以后参考学习。
关于轮播,我一开始想到的是插件swiper(官网上有很详细的讲解这里就不多说),他确实是一个非常好用的插件,但是我想着自己要实现的功能其实特别小,而且需要的样式也不符合,所以决定自己写。
自己写?那么问题来了,自己写该用什么写?CSS3????
其实很简单,vue有自己的动画和过度 点击查看官网
实现:单个组件过渡用:transition 多个组件用:transition-group
html+css片段(vue数据这些根据需要修改,css使用sass写的)
<div class="newsList">
<transition-group tag="ul" class="ac_scroll-ul" name="list" @after-leave="autoPlay" v-if="newsList.length > 0 && newsList">
<li class="ac_scroll-item" v-for="(item, index) in newsList" :key="index" v-show="index === newsIndex" @click="goToPage(item.url)">
<div class="div">
<div class="div_image">
<img :src="require('../../assets/imgs/dsjr.png')" class="image" />
</div>
<div class="div_p">
<p class="p">{{item.detail}}</p>
</div>
</div>
</li>
</transition-group>
<p v-else class="no_massage">暂无消息</p>
</div>
.newsList {
margin: 15px 15px 0 15px;
padding: 10px 20px;
height: 60px;
box-shadow: 0 4px 30px 0 rgba(80, 119, 170, 0.12);
font-size: 14px;
overflow: hidden;
.no_massage {
text-align: center;
margin-top: 10px;
}
.ac_scroll-ul {
position: relative;
width: 100%;
.ac_scroll-item {
position: absolute;
width: 100%;
.div {
.div_image {
width: 20%;
float: left;
text-align: center;
.image {
width: 40px;
height: 40px;
}
}
.div_p {
width: 80%;
float: right;
.p {
text-align: left;
word-wrap: break-word;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
}
}
}
.list-enter-to {
transition: all 2s ease; //时间可以按照自己的需求修改,Y就是上下滑动 X就是左右滑动
transform: translate(0);
}
.list-leave-active {
transition: all 2s ease;
transform: translateY(-100%);
}
.list-enter {
transform: translateY(100%);
}
.list-leave {
transform: translateY(0);
}
}
}