在使用 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">
这样就没有问题了!
来源: http://www.bubuko.com/infodetail-3074169.html