"vue-awesome-swiper": "^4.1.1"不显示小圆点或者分页数字

Question

老师，我使用vue-awesome-swiper@2.6.7版本的时候，会出现首次加载后无法左右滑动的情况，后来我换成 “vue-awesome-swiper”: "^4.1.1"之后，首次加载轮播能正常滑动了，但是小圆点或者下面的分页数字又不见了。请问一下有什么方法解决吗？如果使用新版本的 “vue-awesome-swiper”: "^4.1.1"的话。我自己弄了很久没搞定，所以来问一下。

“swiper”: “^6.5.0”,
“vue”: “^2.5.2”,
“vue-awesome-swiper”: “^4.1.1”,

Home Swiper.vue

<template>
  <div class="wrapper">
    <swiper :options="swiperOptions" v-if="showSwiper">
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" alt="">
      </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true
      }
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>
<style lang='stylus' scoped>
.wrapper >>> .swiper-pagination-bullet-active
    background: #fff
.wrapper
    overflow: hidden
    width:100%
    height:0
    padding-bottom:31.25%
    background-color: gray
    .swiper-img
        width: 100%
</style>

Answer 1

提问者 Agnex 2021-03-29 21:21:58

暂时没事了，现在没出这个问题了。