vue中使用swiper失效問(wèn)題及解決

更新時(shí)間：2023年01月14日 10:35:13 作者：Li_na_na01

這篇文章主要介紹了vue中使用swiper失效問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue使用swiper失效

問(wèn)題描述

需求是要在一個(gè)循環(huán)的列表中第一組數(shù)據(jù)后添加一個(gè)輪播，效果如下

由于所有循環(huán)的數(shù)據(jù)都是一個(gè)接口返回，并在一個(gè)數(shù)組中。

由以下代碼實(shí)現(xiàn)

<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">
            // 此處無(wú)關(guān)代碼省略
            </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>

感覺(jué)上沒(méi)什么問(wèn)題，到瀏覽器里發(fā)現(xiàn)，其他輪播都可以滑動(dòng)，唯獨(dú)這個(gè)輪播不行。

排查過(guò)后發(fā)現(xiàn)，輪播樣式生效了，但是swiper自動(dòng)添加的class沒(méi)加上，并且不可滑動(dòng)，也就是說(shuō) swiper的js部分沒(méi)生效

那就是初始化swiper的問(wèn)題了。我是直接在mounted生命周期里初始化的swiper，問(wèn)題應(yīng)該在這里，swiper的初始化在異步加載的數(shù)據(jù)渲染之前了。

問(wèn)題解決

// data中添加swiper狀態(tài)
data(){
	return {
		swiper: ''
	}
}

猜測(cè)是swiper的初始化的順序?qū)е碌?，那就把初始化的操作延后試一?/p>

// 在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]
            }
        })
        // 將初始化方法放在數(shù)據(jù)請(qǐng)求后的下一個(gè)dom更新后
        this.$nextTick(()=>{
            this.initSwiper()
        })
    })
}

調(diào)整完后，果然swiper正常了。并且之前其他swiper的loop失效的問(wèn)題也解決了