解决swiper 4 的坑~~

最新推荐文章于 2025-06-17 22:41:20 发布

很菜的前端

最新推荐文章于 2025-06-17 22:41:20 发布

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue swiper js

本文链接：https://blog.csdn.net/weixin_41030302/article/details/83111870

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在Vue项目中使用Swiper4遇到的分页器不显示问题及其解决方案。作者通过监视属性的方法，在轮播数组长度变化时，利用$nextTick确保DOM更新后再创建Swiper实例，解决了小圆点不显示和自动轮播功能失效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在以前的swiper版本里面，如果在vue项目中使用swiper非常简单，而且非常友善，但最近发现一个问题，按照以前在 this.$nextTick()方法里面创建Swiper实例已经不友好了，问题就是创建实例的速度比DOM加载的快，导致分页器内容空，小圆点不显示，自动轮播的功能也没有了，此时一脸懵逼，在一波度娘和swiper的论坛以后发现此问题并没解决，给出方法也只是setTimeout延迟加载和取消环路，前者的延迟的时间不好拿捏，后者把功能都改变了，需求并没有按期实现。笔者暂时通过监视属性发现该问题可以解决：

props:{
    recommend:Array, // 轮播数组
},
watch:{
    recommend(){
        // 解决swiper 4显示不出分页器问题
        if(this.recommend.length){
            this.$nextTick(() => {
                new Swiper('.swiper-container',{ 
                    loop: true, // 循环模式选项
                    autoplay: true,// 自动滑动
                    pagination: {
                        el: '.swiper-pagination',
                    },
                })
            })
        }
    }
},