vue新闻轮播简单实现

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);
    }
  }
}