解决swiper 4 的坑~~

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

 

你可能感兴趣的:(vue)