首页 > 其他 > 详细

swiper滑动失效问题

时间:2020-02-28 17:24:19      阅读:166      评论:0      收藏:0      [点我收藏+]

最近在写移动端的项目,页面有用的是swiper滑动的。

但是会发现在滑动时,不灵活,就是滑动时隐藏的数据会显示,但是不滑动数据又在初始那,隐藏的数据还是看不到。

于是各种排除问题,终于在pc端+移动端完美解决了问题

问题出在初始化的时候放在html文件了,应该放在接口取值后找到swiper-wrapper类后马上初始化!

 

$.ajax({
        type: "get",
        url: "",
        dataType: "jsonp",
        success: function (json) {
            console.log(json);
            var swiper = new Swiper(‘.swiper-container‘, {
                slidesPerView: 3.5,
                spaceBetween: 0,
                freeMode: true,
                observer: true,//修改swiper自己或子元素时,自动初始化swiper
                observeParents: true//修改swiper的父元素时,自动初始化swiper
            });
           
            // h5拼接字符串
            var saleItem=item.data;
            console.log(saleItem);
            if(saleItem==""||saleItem==null){
                $(".series-sale-wrap").empty();
            }
            var strSaleHtml="";
            for(var i in saleItem){
//循环的swiper-items
                strSaleHtml+=‘ <div class="swiper-slide swiper-slide-items">‘
                strSaleHtml+=‘ <div class="tb-right-items">‘
                strSaleHtml+=‘<div class="th-right-title">‘+saleItem[i].name+‘ </div>‘
                strSaleHtml+=‘<div class="sale-data">‘
                for(var j in saleItem[i].sales_data){   
                    // console.log(saleItem[i].sales_data);
                    // console.log(saleItem[i].sales_data[j]);
                    strSaleHtml +=‘<div class="sale-items">‘+saleItem[i].sales_data[j]+‘</div>‘
                    $(".sale-data").append(strSaleHtml);
                }
                strSaleHtml+=‘</div>‘;
                strSaleHtml+=‘</div>‘;
                strSaleHtml+=‘</div>‘;
            }
             $(".swiper-wrapper").append(strSaleHtml);
            
        },
        error: function () {
            console.log("请求失败");
        }

    })

 

这样就解决了呀,转自 https://www.jianshu.com/p/5dfeec32bf9a

 

swiper滑动失效问题

原文:https://www.cnblogs.com/cyhsmile/p/12377914.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!