昨天搞这个插件,搞得我很生气!
我只是要个最简单的移动端轮播图,整的我心态本类
能够自动播放,循环就行。。
但是找了一圈,一直报错
还有就是,我获取图片是通过接口的,所以用到了v-for循环
就会出现无法循环播放问题
只要加上
v-show="banners.list.length"
banner.list是存放图片的一个数组
就行
我是在组件内导入,不是全局引入
安装
npm install vue-awesome-swiper@3 --save
引入,注册
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css";
components: {
swiper,
swiperSlide,
},
就是在这里加
v-show=“banners.list.length”
html结构
<swiper
:options="swiperOption"
class="swiper"
ref="mySwiper"
v-show="banners.list.length"
>
<swiper-slide v-for="(banner, index) in banners.list" :key="index">
<img :src="banner.image" :title="banner.title" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
data里的数据
swiperOption: {
loop: true,//循环
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true, //允许分页点击跳转
},
},