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等等……看项目的需要。