zoukankan      html  css  js  c++  java
  • 在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()
        })
    }
    不忘初心,不负梦想
  • 相关阅读:
    深拷贝呀,浅拷贝,再来一次复习整理
    移动端适配之路的一步步了解
    回文数
    整数反转
    关于DOM事件篇收集的知识点
    Html5新增的属性-querySelector
    Java常用的集合类
    VerifyCodeServlet(一次性验证码)
    EncodingFilter
    BaseServlet(一个Servlet多个处理方法)
  • 原文地址:https://www.cnblogs.com/panrui1994/p/12356577.html
Copyright © 2011-2022 走看看