vue使用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失效的问题也解决了

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值