vue-awesome-swiper页面渲染轮播无效的问题

vue-awesome-swiper的问题

使用vue-cli搭建的项目，在图片轮播部分采用了vue-awesome-swiper插件，没有数据时有轮播效果，接入数据渲染时，轮播无效。在网上查找一番以后，解决方法是，在最外面的swiper标签，添加v-if判断：v-if="swiperSlides.length > 1" 则能够正常滚动。代码以下：

<template>
  <swiper :options="swiperOption" class="hot_swiper" v-if="swiperSlides.length > 1" >
    <swiper-slide   v-for="(slide,index) in swiperSlides" :key="index">
      <img :src="slide" alt="pictrue">
    </swiper-slide>
  </swiper>
</template>

这里涉及到vue-awesome-swiper的使用，简单介绍一下，也方便本身之后查阅。

vue-awesome-swiper的安装

npm i vue-awesome-swiper -S    //  swiper专门针对vue出的

全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper);

在组件中使用

① template部分：

<template>
  <swiper :options="swiperOption" class="hot_swiper" v-if="swiperSlides.length > 1" >
    <swiper-slide   v-for="(slide,index) in swiperSlides" :key="index">
      <img :src="slide" alt="pictrue">
    </swiper-slide>
  </swiper>
</template>

② script部分

import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  name: 'hot',
  data() {
    return {
      swiperOption: {      // swiper4的写法哟！
        autoplay: {       // 自动轮播
          delay: 3000,
          disableOnInteraction: false
        },
        slidesPerView: 5,   // 一次轮播放几张图
        spaceBetween: 30,   // 每一张图间隔的距离
        loop: true       // 无限轮播
      },
      swiperSlides: []
    }
  }
}

对于 vue-awesome-swiper 的使用暂时只有这么多，后面有进一步研究再来补充。冲鸭~

而图片轮播也可应用一些UI组件，例如Element-UI（PC端）的Carousel 走马灯，像是我最近着手的项目的banner轮播图，就用了ELement-UI的Carousel、Mint-UI（移动端）的Swiper等等……看项目的须要。