解决swiper动态数据加载在移动端下左右滑动不好使?

在用H5做移动端项目,产品模型需要有个左右滑动轮播图效果。
使用的时候遇到了辣手的问题,使用jquery的ajax动态循环生成当到第二页的时候始终滑动不起来,chrome的手机开发者模式和真机模式全都滑动不起来!
官方规范:

//此处为一个滑动页内容

测试代码

![](../../images/center/ouya/ba01.jpg)
![](../../images/center/ouya/ba01.jpg)
![](../../images/center/ouya/ba01.jpg)

当我在测试的时候,静态复制n个块。用Chrome手机开发模式调试左右滑动畅通无阻,排除了循环出错的问题!再次翻阅官方文档在初始化增加了2项设置(红色文字):

var mySwiper = $('.swiper-container').swiper({
                    mode: 'horizontal',
                    pagination: '.swiper-pagination',
                    loop: true,
                    observer: true,//修改swiper自己或子元素时,自动初始化swiper
                    observeParents: true//修改swiper的父元素时,自动初始化swiper
                });

但动态加载后Chrome调试手机开发模式可以左右滑动了,很顺通。于是真机测试,用苹果手机,安卓各项主流手机依然左右滑动不了。再次崩溃~~

于是各种排除问题,终于在pc端+移动端完美解决了问题!问题出在初始化的时候放在html文件了,应该放在接口取值后找到swiper-wrapper类后马上初始化!

$.ajax({
        url: "memc/center/ouya/getChainImage",
        type: "get",
        dataType: "json",
        timeout: "30000",
        beforeSend: function() {
            $(".swiper-wrapper").html("");
        },
        success: function(res) {
            if (res.resCode == 1) {
                var ht = '';
                $.each(res.data, function(i, v) {
                    ht += '
![]( + v.optIcon + )
'; }); $(".swiper-container").find('.swiper-wrapper').html(ht); var mySwiper = $('.swiper-container').swiper({ mode: 'horizontal', pagination: '.swiper-pagination', loop: true, observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true//修改swiper的父元素时,自动初始化swiper }); } else { showTips(res.msg); } }, error: function() { showTips('焦点图未获取到'); } });

swiper这个插件压缩版有53kb分量还是过大,在移动端流量如黄金的平台下觉得还是太大。如果有更好的解决方案希望大家可以多多指教!

你可能感兴趣的:(解决swiper动态数据加载在移动端下左右滑动不好使?)