vue電商開發記錄2—實現公告輪播組件

簡單說一下用vue實現一個電商公告輪播組件

電商平臺中常會有公告輪播圖，雖然我瀏覽電商網站的時候，常常會忽略掉它~~~，
emmmmm…，切回正題，今天分享一個電商公告輪播的小栗子，僅供參考

公告輪播

html部分

<template>
  <div class="swiper">
    <!-- 左邊公告，放個圖片什麼的 -->
    <div class="swiper_title">
      <span>公告：</span>
    </div>
    <!-- 右邊爲公告內容 -->
    <div class="swiper_box">
      <ul class="swiper_list" :class="{swiper_top:animate}">
        <li v-for="(item,index) in swiperList" :key="index">{{item.text}}</li>
      </ul>
    </div>
  </div>
</template>

js部分

<script>
export default {
  data () {
    return {
      animate: false,
      swiperList: [
        {
          text: '蘋果促銷大甩賣啦!'
        },
        {
          text: '香蕉促銷大甩賣啦!!'
        },
        {
          text: '草莓促銷大甩賣啦!!'
        }
      ]
    };
  },
  created () {
    // 頁面顯示
    setInterval(this.showSwiper, 3000);
  },
  methods: {
    showSwiper () {
      this.animate = true;
      setTimeout(() => {
        this.swiperList.push(this.swiperList[0]);
        this.swiperList.shift();
        this.animate = false;
      }, 1000);
    }
  }
};
</script>

css部分

<style lang="scss" scoped>
.swiper {
  margin-top: 10px;
  width: 100%;
  align-items: center;
  color: #3a3a3a;
  background-color: white;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
}
.swiper_title {
  height: 30px;
  padding-left: 29px;
  background: url(static/images/swiper.gif) 2px 3px no-repeat;
  span {
    font-size: 14px;
    color: #ca010b;
  }
}
.swiper_box {
  display: block;
  position: relative;
  width: 60%;
  height: 37px;
  overflow: hidden;
}
.swiper_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.swiper_top {
  transition: all 0.5s;
  margin-top: -30px;
}
.swiper_list li {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #ca010b;
}
.swiper_list li span {
  padding: 0 2px;
}
</style>

效果