VUE swiper只有一张图片的时候不滑动，多张滑动

最新推荐文章于 2024-09-20 20:13:01 发布

cc_want

最新推荐文章于 2024-09-20 20:13:01 发布

阅读量6.7k

点赞数 2

分类专栏： vue 文章标签： vue swiper

本文链接：https://blog.csdn.net/cc_want/article/details/83751445

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<template>
  <div class="banner">
    <swiper :options="swiperOption" v-if="showSwiper">
      <!-- slides -->
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="banner-img" :src="item.imgUrl">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: "Banner",
    props: {
      list: Array
    },
    data() {
      return {
        swiperOption1: {
          pagination: {
            el: '.swiper-pagination'
          },
          observer: true,
          autoplay: true,
          loop: true
        },
        swiperOption2: {
          pagination: {
            el: '.swiper-pagination'
          },
          observer: true,
          autoplay: true,
          loop: false
        }
      }
    },
    computed: {
      swiperOption(){
        var len = this.list.length
        console.log('swiperOption list size:',len)
        if(len == 1){
          return this.swiperOption2
        }else{
          return this.swiperOption1
        }
      },
      showSwiper() {
        var len = this.list.length
        console.log('list size:',len)
        return len
      }
    }
  }
</script>

处理过程是这样的，添加一个计算属性，在data中定义两种配置，一种是多张图片的swiper配置，一张是单张图片的swiper配置

此处使用的是