vue-awesome-swiper組件不能自動播放和導航器小圓點不顯示問題

from：

https://blog.csdn.net/osdfhv/article/details/79062427 

 

 

 

 
 
 
 

  
  
  
  
1
  
  
  
  
2
  
  
  
  
3
  
  
  
  
4
  
  
  
  
5
  
  
  
  
6
  
  
  
  
7
  
  
  
  
8
  
  
  
  
9
  
  
  
  
10
  
  
  
  
11
  
  
  
  
12
  
  
  
  
13
  
  
  
  
14
  
  
  
  
15
  
  
  
  
16
  
  
  
  
17
  
  
  
  
18
  
  
  
  
19
  
  
  
  
20
  
  
  
  
21
  
  
  
  
22
  
  
  
  
23
  
  
  
  
24
  
  
  
  
25
  
  
  
  
26
  
  
  
  
27
  
  
  
  
28
  
  
  
  
29
  
  
  
  
30
  
  
  
  
31
  
  
  
  
32
  
  
  
  
33
  
  
  
  
34
  
  
  
  
35
  
  
  
  
36
  
  
  
  
37
  
  
  
  
38
  
  
  
  
39
  
  
  
  
40
  
  
  
  
41
  
  
  
  
42
  
  
  
  
43
  
  
  
  
44
  
  
  
  
45
  
  
  
  
46
  
  
  
  
47
  
  
  
  
48
  
  
  
  
49
  
  
  
  
50
  
  
  
  
51
  
  
  
  
52
  
  
  
  
53
  
  
  
  
54
  
  
  
  
55
  
  
  
  
56
  
  
  
  
57
  
  
  
  
58
  
  
  
  
59
  
  
  
  
60
  
  
  
  
61
  
  
  
  
62
  
  
  
  
63
  
  
  
  
64
  
  
  
  
65
  
  
  
  
66
  
  
  
  
67
  
  
  
  
68
  
  
  
  
69
  
  
  
  
70
  
  
  
  
71
  
  
  
  
72
  
  
  
  
73
  
  
  
  
74
  
  
  
  
75
  
  
  
  
76
  
  
  
  
77
  
  
  
  
78
  
  
  
  
79
  
  
  
  
80
  
  
  
  
81
  
  
  
  
82
  
  
  
  
83
  
  
  
  
84
  
  
  
  
85
 
 
 
 
<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- 幻燈內容 -->
        <swiper-slide :key="i" v-for="(str, i) in bannerList">
          <img :src="str.picUrl" style="height:100%"/>
        </swiper-slide>
        <!-- 如下控件元素均爲可選 -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script type="text/ecmascript-6"> import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { props: ['bannerList'], data () { return { data: {}, swiperOption: { // 全部配置均爲可選（同Swiper配置） initialSlide: 0, pagination:'.swiper-pagination',//這裏修改 // pagination: { // el: '.swiper-pagination' // }, loop: true, speed: 400, direction: 'horizontal', paginationClickable: true, mousewheelControl: true, autoplay: 1000,//這裏修改 //autoplay: true, autoplayDisableOnInteraction: false, observer: true, observeParents: true, debugger: true, onTransitionStart (swiper) { console.log(swiper) } } } }, mounted () { // 這邊就能夠使用swiper這個對象去使用swiper官網中的那些方法 this.swiper.slideTo(1, 1000, false) }, computed: { swiper () { return this.$refs.mySwiper.swiper } }, components: { swiper, swiperSlide } } </script>

<style lang="stylus" rel="stylesheet/stylus"> .swiper-container { width: 100% height: 10rem .swiper-wrapper { width: 100% height: 100% } .swiper-slide { background-position: center; background-size: cover; width: 100% height: 100% img { width: 100% height: 100% } } } </style>

 

結果發現：不能自動輪播和導航器小圓點不顯示