博客

在以前的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',
                    },
                })
            })
        }
    }
},