vue中使用vue-awesome-swiper的問題

發(fā)現(xiàn)找個(gè)好用點(diǎn)的vue插件真是困難啊 尤其是輪播插件 之前直接用的swiper 很多bug 比如說刷新頁面的時(shí)候 輪播到第二張圖馬上又回到第一張圖片 實(shí)在不知道問題在哪 這回下了個(gè)vue-awesome-swiper 解決了這個(gè)問題 但還是有問題 分頁器和箭頭出不來
<template>

<div class="swiper-container clearfix">

 <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
    <!-- slides -->
    <swiper-slide 
      v-for="item in imgUrl" 
      :style="{ backgroundImage: 'url(' + item.imageURL + ')' }">
      <a :href="item.url" target="blank"></a>
    </swiper-slide>
    <!-- Optional controls -->
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
   <div class="swiper-pagination swiper-pagination-white"></div>
  </swiper>
   <div class="rate">
     <ul class="rateBox">
       <li class="cl one">平臺(tái)預(yù)期年化收益率</li>
       <li class="cl two"><b>10</b>% <strong>~</strong><b>12</b>%</li>
       <li class="cl" style=" color:#ff5316;">100%風(fēng)險(xiǎn)準(zhǔn)備金制度</li>
       <li class="cl four">
         <router-link 
           v-if="!investorInfo" 
           to="/register"
           class="register"
           ></router-link>
         <router-link 
           v-if="investorInfo" 
           to="/account/overview"
           class="accountImg"
           ></router-link>
       </li>
     </ul>
   </div>
</div>

</template>

<script>
import storageUtil from 'tools/storageUtil.js'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {

  props: ['imgUrl'],
  name: 'carrousel',
  data() {
      return {
        notNextTick: true,
        swiperOption: {
          autoplay: 3000,
          direction: 'horizontal',
          grabCursor: true,
          setWrapperSize: true,
          autoHeight: true,
          loop: true,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          autoplayDisableOnInteraction : false,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
          observeParents: true
          }
      }
  },
  computed: {
      investorInfo() {
          return this.$store.state.InvestorInfo
      }
  },
  mounted() {
      this.swiper.slideTo(3, 1000, false)
  },
  components: {
    swiper,
    swiperSlide
  }

}
</script>

<style lang="less" >
@import '~assets/less/index.less';
.swiper-container {

width: 100%;
height: 350px;
position: relative;
.swiper-wrapper {
  .swiper-slide {
    width: 100%;
    height: 350px;
    float: left;
    background-size: cover;
    background-position: center;
    position: relative;
    a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
.swiper-button-prev {
  /* width: 30px;
  height: 30px;
  left: 20px;
  & + div{
    width: 30px;
    height: 30px;
    right: 20px;
  } */
}
.swiper-pagination {
  & > span {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: @white-color;
  }
}
.rate {
  position: absolute;
  width: 291px;
  top: 20px;
  right: 120px;
  z-index: 2;
  & > .rateBox {
    width: 282px;
    height: 308px;
    position: absolute;
    top: 4px;
    left: 4px;
    background-color: @white-color;
    padding: 30px;
    box-sizing: border-box;
    li {
      text-align: center;
      margin: 20px 0;
      color: #ff5316;
      &.one {
         font-size: 18px;
      }
      &.two {
         font-size: 24px;
         margin: 20px 0;
         color: #ff5316;
      }
      &.four {
        margin-left: -10px;
      }
      & > b {
        font-size: 54px;
        font-weight: bold;
      }
      & > a {
        display: inline-block;
        width: 240px;
        height: 40px;
        cursor: pointer;
        background-repeat: no-repeat;
        &.register {
            background: url(../../../assets/images/index.jpg) no-repeat;
        }
        &.accountImg {
            background: url(../../../assets/images/account/my_account.png) no-repeat  center center;
        }
      }
    }
  }
}

}
</style>