mall-web-ssr/components/supplier/banner.vue

<template>
  <div class="banner">
    <div v-swiper:mySwiper="swiperOption" class="swiper-container" refs="Vswiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="banner in banners">
          <a>
            <img :src="banner.pictureLink"/>
          </a>
        </div>
        <div v-show="banners.length > 1" class="swiper-button-prev"><i class="iconfont icon-swiper-left"></i></div>
        <div v-show="banners.length > 1" class="swiper-button-next"><i class="iconfont icon-swiper-right"></i></div>
      </div>
      <div v-show="banners.length > 1" class="swiper-pagination swiper-pagination-bullets"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BannerView',
    data () {
      return {
        swiperOption: {
          autoplay: 6000,
          pagination: '.swiper-pagination',
          // 解决点击分页器后图片就不能轮播的问题
          autoplayDisableOnInteraction: false,
          paginationClickable: true,
          mousewheelControl: false,
          effect: 'fade',
          lazyLoading: true,
          observer: true,
          loop: true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next'
        }
      }
    },
    computed: {
      banners () {
        return this.$store.state.supplier.detail.banner.data.data || []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.mySwiper.update()
      })
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
.banner{
  height:400px;
  background: url(/images/supplier/banner.png)no-repeat center center;
  margin-bottom:15px;
  border-radius:5px;
  overflow: hidden;
}
</style>