vue-awesome-swiper中loop设置true无效

Question

vue-awesome-swiper中loop设置true无效

数据是动态加载的，在网上查不到和我相关的问题答案
是放在子组件中，首页直接引入此swiper子组件的

相关代码

<div class="wrapper" :class="cname">
    <swiper :options="options">
        <swiper-slide v-for="(item, index) in items" :key="index">
            <slot :src="item"></slot>
        </swiper-slide>
        <div class="swiper-pagination" v-if="options.pagination"  slot="pagination"></div>
    </swiper>
</div>

name: "sliderComponent",
props: {
  cname: {
      type: String,
      default: ""
  },
  options: {
      type: Object,
      default () {
          return {
              autoplay: {
                  delay: 3000,
                  disableOnInteraction: false,
                  //stopOnLastSlide: false
              },
              loop: true,
              pagination: {
                  el: '.swiper-pagination'
              },
              observeParents:true,
              observer:true                 
          }
      }
  },

不循环了，轮播到最后一个图就不动了

Answer 1

试了好多次，终极答案是这样：

<swiper
  :options="swiperOption"
  ref="mySwiper"
>
  <!-- slides -->
  <swiper-slide
    v-for="(item,index) in topBanner"
    :key="item.id"
  >
  <img
    :src="item.image_url"
    :alt="index"
    class="banner-img"
  >
  </swiper-slide>
</swiper>

data() {
  return {
    swiperOption: {
      init:false,
      loop: true,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false
      },
    },
  }
}

当然，在computed()时要获取$refs:

computed: {
  swiper() {
    return this.$refs.mySwiper.swiper;
  }
},

然后在vue生命周期的updated()时初始化swiper

updated() {
  console.log(this.topBanner);
  if (this.topBanner.length>1) {
    console.log(this.swiper);
    this.swiper.init();
  }
},

不用v-if，获取到了this.swiper，问题完美解决

Answer 2

你在swiper上面使用v-if=‘item.length’,确保图片获取完成之后再渲染swiper组件

Answer 3

看看官方的使用方式，是不是你的配置有不正确的。
https://github.com/surmon-chi...

Answer 4

<swiper :options="swiperOption"  **ref="swiperOption"** >
        <swiper-slide v-for="(item, index) in items" :key="index">
            <slot :src="item"></slot>
        </swiper-slide>
        <div class="swiper-pagination" v-if="options.pagination"  slot="pagination"></div>
    </swiper>

在swiper上加上绑定ref="swiperOption"
data里

return{
swiperOption:{
    autoplay: {
                      delay: 3000,
                      disableOnInteraction: false,
                      //stopOnLastSlide: false
                  },
                  loop: true,
                  pagination: {
                      el: '.swiper-pagination'
                  },
                  observeParents:true,
                  observer:true  
    }
}
    

Answer 5

你好，我把你的代码贴出来运行了，完全没有问题的呀，就改了一点点

<!-- <slot :src="item"></slot> -->
<img :src="item" alt="">

下面是全部代码

<template>
    <div class="wrapper" :class="cname">
        <swiper :options="options">
            <swiper-slide v-for="(item, index) in items" :key="index">
                <!-- <slot :src="item"></slot> -->
                <img :src="item" alt="">
            </swiper-slide>
            <div class="swiper-pagination" v-if="options.pagination"  slot="pagination"></div>
        </swiper>
    </div>
    
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
    components: {  swiper, swiperSlide  },
    name: "sliderComponent",
    data(){
        return {
            items: [
                'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2150640351,1273280487&fm=27&gp=0.jpg',
                'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2325670101,3357651705&fm=27&gp=0.jpg',
                'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1125702920,1716149673&fm=27&gp=0.jpg',
            ]
        }
    },
    props: {
      cname: {
          type: String,
          default: ""
      },
      options: {
          type: Object,
          default () {
              return {
                  autoplay: {
                      delay: 1000,
                      disableOnInteraction: false,
                      //stopOnLastSlide: false
                  },
                  loop: true,
                  pagination: {
                      el: '.swiper-pagination'
                  },
                  observeParents:true,
                  observer:true                 
              }
          }
      },
    }
}
</script>

如果还有什么问题可以私信我

Answer 6

有效解决方法在问题评论里