vue动态获取后台数据,swiper滑动失效问题修复及vue动态数据swiper滑动默认显示最后一页修复

源码技巧5年前 (2019-07-10)10210

究其原因,是因为swiper提前初始化了,那时候数据还没有完全出来。这里有两种解决办法

1. 使用vue提供的$nextTick()方法

当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像。

在数据初始化完毕之后,再初始化swiper就不会出现问题了

this.$nextTick(function () {
              var swiper = new Swiper('.swiper-container', {
        此处省略
         })
            })

2.在swiper初始化的时候

swiper1 = new Swiper('.swiper-container', {
    initialSlide :0,
    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true//修改swiper的父元素时,自动初始化swiper
});
--------------------- vue动态数据swiper滑动默认显示最后一页修复-----------------------------

        mounted(){ //vue中使用Swiper滑动组件
            var swiper = new Swiper('#swiper-container', {
                slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量,'auto'则自动根据slides的宽度来设定数量
                spaceBetween: 5,//在slide之间设置距离(单位px)
                resistanceRatio : 0, //让slide在边缘不能被拖动
                initialSlide :0, //设定初始化时slide的索引
                //observer:true,//修改swiper自己或子元素时,自动初始化swiper|修复动态后台获取数据滑动无效
            //observeParents:true//修改swiper的父元素时,自动初始化swiper|修复动态后台获取数据滑动无效
            });
            var swiper2 = new Swiper('#swiper-container2', {
                init:false,
                slidesPerView: 'auto',//设置slider容器能够同时显示的slides数量,'auto'则自动根据slides的宽度来设定数量
                spaceBetween: 5, //在slide之间设置距离(单位px)
                resistanceRatio : 0, //让slide在边缘不能被拖动
                initialSlide :0, //设定初始化时slide的索引
                observer:true,//修改swiper自己或子元素时,自动初始化swiper|修复动态后台获取数据滑动无效
            //observeParents:true//修改swiper的父元素时,自动初始化swiper|修复动态后台获取数据滑动无效
            });
            setTimeout(function () {
                  swiper2.init();
            },1000);//实例时不进行初始化,加载完成延时处理,完美解决动态数据默认显示最后一页
            var swiper3 = new Swiper('#swiper-container3', {
                slidesPerView: 'auto',
                spaceBetween: 5, //在slide之间设置距离(单位px)
                resistanceRatio : 0, //让slide在边缘不能被拖动
                initialSlide :0, //设定初始化时slide的索引
                observer:true,//修改swiper自己或子元素时,自动初始化swiper|修复动态后台获取数据滑动无效
            //observeParents:true//修改swiper的父元素时,自动初始化swiper|修复动态后台获取数据滑动无效
            });
        },
标签: VueSwiper滑动

“vue动态获取后台数据,swiper滑动失效问题修复及vue动态数据swiper滑动默认显示最后一页修复” 的相关文章

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。