在vue当中使用swiper问题记录

2020年2月24日13:19:05

1：首先swiper的初始化一定要保证slide已经渲染出来
解决：所以初始化方法一定要放在
that.$nextTick(function () {
    //初始化swiper
})

2：当我们要更新swiper时候，单纯的更新数组发现swiper渲染出现错误
解决：出现这个问题的原因是，swiper轮播的效果是组件帮我们生成了几个真实的dom
当我们更新vue的数据时，这几个真实的dom仍然存在。我采用的办法是给整个添加一个状态
<div class="swiper swiper-container">
    <div class="swiper-wrapper" v-if="swiperFlag"> //看这里
        <div class="swiper-slide" v-for="(item, index) in game_result.contens" :key="item.id">
            <i class="icon"></i>
            <img :src="item.pic" alt="">
            <a :href="item.url" style="color: brown;">{{item.id}}</a>
        </div>
    </div>
    <div class="pagination"></div>
</div>

if (that.mySwiper) {
    that.swiperFlag = false //先将整个swiper移除掉
    that.game_result =  that.game_info[index] //然后更新vue的数组
    that.$nextTick(function () {
        that.swiperFlag = true //在将dom生成回来,此时生成slide只剩下vue数据生成的
        that.$nextTick(function () {
            that.initSwiper() //在重新初始化一次swiper
        })
    })
}else {
    that.game_result =  that.game_info[index]
    that.$nextTick(function () {
        that.initSwiper()
    })
}