vue新闻轮播简单实现

Love The Way You Lie 2022-12-01 11:58 166阅读 0赞

# vue新闻轮播简单实现 #

需求：如图左边是图片，右边是文字，时间间隔n秒自动播放下一则新闻![20200826222222995.png][]

前言：所想所学所感记录下来，供以后参考学习。

关于轮播，我一开始想到的是插件**swiper（官网上有很详细的讲解这里就不多说），**他确实是一个非常好用的插件，但是我想着自己要实现的功能其实特别小，而且需要的样式也不符合，所以决定自己写。

自己写？那么问题来了，自己写该用什么写？CSS3？？？？

其实很简单，vue有自己的动画和过度 [点击查看官网][Link 1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NjQ4Mzgy_size_16_color_FFFFFF_t_70][]

实现：单个组件过渡用：**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);
        }
      }
    }

[20200826222222995.png]: /images/20221123/9fcfd39fc8374fb6bdb30b5ed9f34d49.png
[Link 1]: https://cn.vuejs.org/v2/guide/transitions.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NjQ4Mzgy_size_16_color_FFFFFF_t_70]: /images/20221123/b5d0465bb2074dd0b56e51d7c0f48d99.png