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

小鱼儿 2022-04-22 13:40 116阅读 0赞

<template>
      <div class="banner">
        <swiper :options="swiperOption" v-if="showSwiper">
          
          <swiper-slide v-for="item of list" :key="item.id">
            <img class="banner-img" :src="item.imgUrl">
          </swiper-slide>
          
          <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配置

此处使用的是

vue-awesome-swiper

发表评论取消回复

表情：

评论列表（有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

相关 python将多张图片合并成一张图片

文章目录说明：合并图片的三个过程 1、参考原博主的： 2、优化第一个数量问题： 3、优化俩个问题（数量不限+性状按

不念不忘少年蓝@/ 2023年06月30日 11:54/ 0 赞/ 192 阅读

相关 vue实现签名和两张图片合成一张

效果就是如下了，签名的组件我用的是百度的这个组件，地址是：https://github.com/JaimeCheng/vue-esign ![在这里插入图片描述][wa

- 日理万妓/ 2022年12月27日 14:09/ 0 赞/ 453 阅读

相关 swiper反向滑动

swiper一直都是比较喜欢的一个插件，不管是设计还是我自己，都习惯了默认的向左滑动。今天客户要求必须向右，找了半天，终于找到了相应的参数。 direction

亦凉/ 2022年12月18日 09:55/ 0 赞/ 517 阅读

相关 vue+swiper仿抖音视频滑动

解释一番，本文章只是做了一个仿抖音的滑动效果，并没有添加其他效果，例如头部的类似关注与推荐功能、广告、右侧按钮等等，这些功能可按项目需求添加，在这里我就不多bb了。先看下

迷南。/ 2022年12月13日 14:26/ 0 赞/ 351 阅读

相关 Halcon：多张图片合并成一张图片

1. 背景现有一文件夹，其中包含多张图片，希望能够将这些图片按几行几列合并成一张大图并显示。 2. 实现关闭窗口后重新打开 dev_cl

一时失言乱红尘/ 2022年10月15日 08:00/ 0 赞/ 398 阅读

相关 swiper实现触摸滑动

引入需要的文件 <link href="css/swiper.min.css" rel="stylesheet" type="text/css"

骑猪看日落/ 2022年08月05日 02:43/ 0 赞/ 309 阅读

相关 vue上传多张图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWd

我会带着你远行/ 2022年06月08日 11:56/ 0 赞/ 375 阅读

相关左右滑动swiper

转自：http://blog.csdn.net/xieshunhai/article/details/72830938 .wxml <view class="sw

谁践踏了优雅/ 2022年06月01日 11:58/ 0 赞/ 369 阅读

相关 Swiper4.x使用之图片只有一张时不进行轮播，多张才进行轮播

回想初学JavaScript时，写一个图片的轮播；那是写得惨不忍睹。现在我们再去写图片轮播的话；用Swiper（官网：[https://www.swiper.com.cn][h

系统管理员/ 2022年05月11日 02:58/ 0 赞/ 326 阅读

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

<template> <div class="banner"> <swiper :options="swiperOption" v-if="

小鱼儿/ 2022年04月22日 13:40/ 0 赞/ 117 阅读