vue电商开发记录2—实现公告轮播组件

关注我的个人博客:https://pinbolei.cn，获取更多内容

简单说一下用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>

效果