vue中使用swiper失效问题及解决
Li_na_na01 人气:0vue使用swiper失效
问题描述
需求是 要在一个循环的列表中第一组数据后添加一个轮播,效果如下
由于所有循环的数据都是一个接口返回,并在一个数组中。
由以下代码实现
<div v-for="(item, index) in videoList" :key="index"> <div class="index_list01"> <div class="index_list"> <div class="index_list1"> <div class="index_list1_1">{{item.title}}</div> <div class="index_list1_2" @click="gotoPage('/mine/search')">查看更多 ></div> </div> <div class="index_list2"> // 此处无关代码省略 </div> </div> </div> <div v-if="index == 0" class="advert"> <div class="banner"> <div class="swiper-container swiper2"> <div class="swiper-wrapper"> <div v-for="(item, index) in advertList" :key="item.id || index" class="swiper-slide"><img :src="item.picUrl"/></div> </div> <div class="swiper-pagination"></div> </div> </div> </div> </div>
感觉上没什么问题,到浏览器里发现,其他轮播都可以滑动,唯独这个轮播不行。
排查过后发现,轮播样式生效了,但是swiper自动添加的class没加上,并且不可滑动,也就是说 swiper的js部分没生效
那就是初始化swiper的问题了。我是直接在mounted生命周期里初始化的swiper,问题应该在这里,swiper的初始化在异步加载的数据渲染之前了。
问题解决
// data中添加swiper状态 data(){ return { swiper: '' } }
猜测是swiper的初始化的顺序导致的,那就把初始化的操作延后试一下
// 在methods里定义初始化的方法 initSwiper(){ if(this.swiper != ''){return} this.swiper = new Swiper('.swiper-container', { loop: true, }) }
getInfo() { this.$api.index.getIndexInfo().then(res => { let {indexCenterBannerList, classifyListCollect} = res.data let videoKeys = Object.keys(classifyListCollect) this.advertList = indexCenterBannerList this.videoList = videoKeys.map(item =>{ return { title: item, list: classifyListCollect[item] } }) // 将初始化方法放在数据请求后的下一个dom更新后 this.$nextTick(()=>{ this.initSwiper() }) }) }
调整完后,果然swiper正常了。并且之前其他swiper的loop失效的问题也解决了
vue2+swiper踩坑记 effect等参数无效
vue2使用swiper需要安装vue-awesome-swiper,然后坑来了
使用最新4.版本的vue-awesome-swiper,effect等参数无效
解决: 降级到3.1.3
注意: 4.版本引入swiper, swiperSlide是大写 3.1.3是小写
4.版本获取实例this.refs.mySwiper.swiperInstance3.版本获取实例this.refs.mySwiper.swiper
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容