共计 1269 个字符，预计需要花费 4 分钟才能阅读完成。
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 等等……看项目的需要。
