首页 前端知识 移动端VUE中使用swiper动态渲染滑动功能失效以及swiper-slide间隙消失等一系列的问题解决。

移动端VUE中使用swiper动态渲染滑动功能失效以及swiper-slide间隙消失等一系列的问题解决。

2024-06-11 09:06:33 前端知识 前端哥 637 599 我要收藏

     问题: 静态的数据渲染都没有问题但是用v-for动态渲染数据的时候就出现了缝隙及其左右滑动都失效了。在静态数据渲染出来的时候却不会

      思路:一开始我在想是不是css被我污染了 结果试了好多次都是静态渲染没问题而v-for动态渲染就出现不能滑动及元素间隙消失 ,经过了10多分钟的排查发现问题所在。   

   解决方法和错误地方:

        问题是:我的swiper初始化是在生命周期钩子的mounted中初始化的这样是错误的,因为mounted实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内,如果这时候初始化的话节点渲染而swiper的css和js文件来不及加载所以导致滑动不了及其出些一些列问题,

错误示例:

mounted() {
    new Swiper('.swiper-container-rec', {
      pagination: '.swiper-pagination',
      slidesPerView: 'auto',
      spaceBetween: 20,
 
    });
  },

      解决方法:把swiper初始化封装成一个函数在声明周期钩子updated中调用初始化函数因为updayed是组件 DOM 已经更新,可以执行依赖于 DOM 的操作 里面再用.$nextTick( ) 调用原因是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它  所以swiper的css和js文件也加载进来了 也就解决了。

        函数:

 methods: {
    getswiper(){
      new Swiper('.swiper-container-rec', {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        centeredSlides: false,
        paginationClickable: false,
        spaceBetween: 20,
        touchAction: 'none',
      });
    },
  },

        调用:

updated() {
    this.$nextTick(()=>{
      this.getswiper()
    })
  },

缝隙出来了也能滑动以及刷新只出现单个元素的问题也解决了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11899.html
标签
评论
发布的文章

FastJson 2『使用心得』

2024-06-18 23:06:34

fastjson(版本<=1.2.24)复现

2024-06-18 23:06:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!