mui:单页面上拉加载数据加载

html部分
<!--顶部搜索条件-->
<div class="mui-bar iconListStorage secondLevel">
    <div id="segmentedControl" class="regionalDiv ">
        <a class="regionalDivA" href="#middlePopoverLo"><span
                class="mui-controlLocation">所在地</span><img class="triangleDown" src="../themes/cool/img/public/triangle-down.png" alt="">
        </a>
        <a class="regionalDivA" href="#middleobjective"><span
                class="mui-controlobjective">目的地</span><img class="triangleDown" src="../themes/cool/img/public/triangle-down.png" alt="">
        </a>
        <a class="regionalDivA" href="#middlePopoverCart"><span
                class="mui-controlCart">车型</span><img class="triangleDown" src="../themes/cool/img/public/triangle-down.png" alt="">
        </a>
    </div>
</div>


<!--运输线路列表-->
<div id="transList" class="mui-content mui-scroll-wrapper singlePage regional mb30">

    <div class="mui-scroll mt80 singPock">

        <ul class="textContent mui-table-view mt11 mb20">
            

        </ul>

    </div>
</div>


js部分
$(function(){
    var pageNum=0;
    function moreCold(pageNum,type){  
        var page = 1;
        var page_size = 10;//条数
        var startCity = sessionStorage.getItem('location')//起始地
        var endCity = sessionStorage.getItem('objective')//目的地
        var VehicleType = sessionStorage.getItem('cartid')//车型
        var data = {
            page:pageNum,
            page_size:page_size,
            from_city_Id: startCity,
            to_city_Id: endCity,
            vehicle_type: VehicleType,
        };
        $.getJSON('more/list', data, function (info) {
            var str='';
            var datas = info.data;
            //返回数据为空则显示没有更多数据了，否则一直可以下拉
            if(datas.length == 0){
                mui('#transList').pullRefresh().endPullupToRefresh(true);
            }else{              
                mui('#transList').pullRefresh().endPullupToRefresh(false);
            }
            for (var i = 0; i < datas.length; i++) {
                cold = datas[i];                              
                str+='<li class="mui-table-view-cell">'
                +'<ul class="coolPowerUl">'
                +'<li class="coolPowerwid35">'
                +'<p>'
                +'<img class="addressImg" src="../themes/cool/img/public/start.png" alt="">'
                +'<span>'+cold["from_province_id"]+'</span><span>'+cold["from_city_id"]+'</span>'
                +'</p>'
                +'<p>'
                +'<img class="addressImg" src="../themes/cool/img/public/end.png" alt="">'
                +'<span>'+cold["to_province_id"]+'</span><span>'+cold["to_city_id"]+'</span>'
                +'</p>'
                +'</li>'
                +'<li class="coolPowerwid25">'
                +'<p><span>'+cold["transport_type"]+'</span></p>'
                +'<p><span>'+cold["vehicle_type"]+'</span></p>'
                +'</li>'
                +'<li class="coolPowerwid22">'
                +'<p><span>时效</span></p>'
                +'<p><span>'+cold["transport_time"]+'天</span></p>'
                +'</li>'
                +'<li class="coolPowerwid18">'
                +'<p><span>'+cold["contact_man"]+'</span></p>'
                +'<p><span>'+cold["contact_way"]+'</span></p>'
                +'</li>'
                +'</ul>'
                +'</li>';
            }
            //点击顶部搜索条件，是替换还是插入
            if(type == 1){
                $('.textContent').html(str); 
            }else{
               $('.textContent').append(str);  
            }
               
        });
    }

    mui.init({
        pullRefresh : {
            container:'#transList',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
            up : {
                height:50,//可选.默认50.触发上拉加载拖动距离
                auto:true,//可选,默认false.自动上拉加载一次
                contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                 callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                     window.setTimeout(function(){
                        pageNum++;
                        moreCold(pageNum);
                        },50);
                     }
 
            }
        }
    });

    $('#allCity, #allCityObjectiv').click(function () {
        moreCold(1,1);
    })
    $('ul li').click(function () {
       moreCold(1,1);
    })
     	
    //获取车型id
    $('.mui-table-view3 li a').click(function(){
        sessionStorage.setItem('cartid', $(this).data('id'));
    })

    /*解决下拉加载导致a标签页面不跳转问题*/
    mui('#transList').on('tap','a',function(){
        window.top.location.href=this.href;
    });

})

来源：CSDN

作者：foxqi

链接：https://blog.csdn.net/qq_38586903/article/details/82977954