vue-awesome-swiper组件不能自动播放和导航器小圆点不显示问题

た入场券 2022-05-31 23:51 404阅读 0赞

> 折腾一个多小时，怪了，以前也是这样用的，为什么想在不行了呢？
> 
> 问题是使用vue-awesome-swiper组件时不能自动轮播和导航器小圆点不显示
> 
> 犯了一个想当然的错误！经验不等于知识，知识是在改变的

一个轮播图组件可能是这样的

npm i --save-dev vue-awesome-swiper

main.js里面

import 'swiper/dist/css/swiper.css'
    
            import VueAwesomeSwiper from 'vue-awesome-swiper'
    
            Vue.use(VueAwesomeSwiper)

banner.vue

<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>

结果发现：不能自动轮播和导航器小圆点不显示

## 问题原因是现在最新的swiper版本已经开始区分组件和普通版本了。 ##

结论：请以官方的API为准进行配置