vue-awesome-swiper轮播插件的使用方法及问题。

时间:2022-05-10 22:38:06

在使用vue-awesome-swiper的时候,遇到一些问题,记录一下!

      1.npm 安装

npm install vue-awesome-swiper --save

  2.使用

在main.js中导入:

 

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

 

  

 

在组件中使用:

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for='item of swiperlist' :key="item.id" >
        <img class="swiper-img" :src="item.imgurl" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

在data中配置:

data: function () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 3000,
          disableOninteraction: true
        },
        loop: true
      }
    }
  }

常用参数可见https://www.swiper.com.cn/api/index.html

我遇到的问题:

在测试的时候将swiperlist数组写死在data中没有任何问题,改成动态获取数据轮播图到最后一张就没办法继续滑动。

原因是因为swiperlist刚开始数据为定义[],后来赋值才有值,所以要先判断swiperlist是否为空,这里就在swiper这个容器中进行判断,若数据长度为0,就不显示这个容器,

<swiper :options="swiperOption" v-if="swiperlist.length!=0">

  这样就没有问题了!