mui:选项卡切换+下拉刷新+数据加载进阶版(点击开始搜索,搜索内容)

(function ($) {    
    //阻尼系数
    var deceleration = mui.os.ios ? 0.003 : 0.0009;
    $('.mui-scroll-wrapper').scroll({
        bounce: false,
        indicators: true, //是否显示滚动条
        deceleration: deceleration
    });
    var pageNum=1;
    var pageNum1=1;
    var pageNum2=1;
    var pageNum3=1;

    $.ready(function () {
        //循环初始化所有下拉刷新,上拉加载。
        $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {

            $(pullRefreshEl).pullToRefresh({
                up: {
                    auto: true, //自动执行一次上拉加载,可选;
                    show: false, //显示底部上拉加载提示信息,可选;
                    //contentinit: '上拉显示更多1', //可以上拉提示信息
                    //contentdown: '上拉显示更多2', //上拉结束提示信息
                    contentrefresh: '正在加载...', //上拉进行中提示信息
                    contentnomore: '没有更多数据了', //上拉无更多信息时提示信息
                    callback:function () {
                        var self = this;  
                        var ul = self.element.querySelector('.mui-table-view');  
                        setTimeout(function () {                    
                            if(index == 0){
                                pageNum=pageNum1++;
                                //在这里调用点击开始搜索的功能函数
                                clickChange(ul,index,self,1,otherdata,1);
                            }else if(index == 1){
                                pageNum=pageNum2++;
                                clickChange1(ul,index,self,1,otherdata,1);
                            }else if(index == 2){
                                pageNum=pageNum3++;
                                clickChange2(ul,index,self,1,otherdata,1);
                            }
                            createFragment(ul, index,self,pageNum,0);                          
                        }, 50);
                    }
                }
            });
        });

    });
})(mui);

//列表
var otherdata={};
function createFragment(ul, index,self,pageNum,type) {
    var fragment = document.createDocumentFragment();
    var li;
       li = document.createElement('li');
       // li.className = 'mui-table-view-cell';
        var ajaxUrl=null;
        //选择状态
        if(index == 0){
           ajaxUrl = '/h5/warehouse/store/userlist';
        }else if(index == 1){
            ajaxUrl ='/h5/warehouse/storearea/list';
        }else if(index == 2){
           ajaxUrl = '/h5/warehouse/storeseat/list';  
        }
       
    var page_size = 10;//条数
        var data = {
            page:pageNum,
            page_size:page_size,
        };
        //搜索条件与分页条件合并
        data = $.extend( data, otherdata );
        $.getJSON(ajaxUrl, data, function (info) {
           if(info.status==1){
               var str='';
               var datas = info.data;
               if(datas.length == 0){
                $(ul).find('li').remove();
                   self.endPullUpToRefresh(true);
               }else{
                   for (var i = 0; i < datas.length; i++) {
                       cold = datas[i];
                       if(index == 0){
                          str+='<div class="mui-card listOrder warelistOrder"  id="store'+cold['id']+'" >'
                              +'<div class="mui-card-content">'
                              +'<ul class="contractUl">'
                              +'<li>仓库编号:'+cold['code']+'</li>'
                              +'<li>仓库名称:'+cold['full_name']+'</li>'
                              +'<li>仓库代码:'+cold['number_code']+'</li>'
                              +'<li>负责人:'+cold['dutyman']+'</li>'
                              +'<li>联系人:'+cold['linkman']+'</li>'
                              +'<li>联系电话:'+cold['mobile']+'</li>'
                              +'</ul>'
                              +'</div>'
                              +'<div class="mui-card-footer">'
                              +'<a class="btnStyle btnStyleGary btnStyleDel deleteStore"   data-id="'+cold['id']+'"   href="javascript:;">删除</a>'
                              +'<a class="btnStyle"  href="/h5/warehouse/storeview?id='+cold['id']+'" >查看详情</a>'
                              +'</div>'
                              +'</div>';
                      }
                       if(index == 1){
                           str+='<div class="mui-card listOrder warelistOrder" id="storearea'+cold['id']+'" >'
                               +'<div class="mui-card-content">'
                               +'<ul class="contractUl">'
                               +'<li>仓库名称:'+cold['store_id']+'</li>'
                               +'<li>库区名称:'+cold['name']+'</li>'
                               +'<li>库区代码:'+cold['number_code']+'</li>'
                               +'<li>库区面积:'+cold['area']+'</li>'
                               +'</ul>'
                               +'</div>'
                               +'<div class="mui-card-footer">'
                               +'<a class="btnStyle btnStyleGary btnStyleDel deleteStoreArea"  data-id="'+cold['id']+'" href="javascript:;">删除</a>'
                               +'<a class="btnStyle"  href="/h5/warehouse/storeareaview?id='+cold['id']+'">查看详情</a>'
                               +'</div>'
                               +'</div>';
                       }
                       if(index == 2){
                           str+='<div class="mui-card listOrder warelistOrder" id="storeseat'+cold['id']+'">'
                               +'<div class="mui-card-content">'
                               +'<ul class="contractUl">'
                               +'<li>仓库名称:'+cold['store_id']+'</li>'
                               +'<li>库区名称:'+cold['store_area_id']+'</li>'
                               +'<li>库位代码:'+cold['seat_no']+'</li>'
                               +'<li>库位名称:'+cold['name']+'</li>'
                               +'</ul>'
                               +'</div>'
                               +'<div class="mui-card-footer">'
                               +'<a class="btnStyle btnStyleGary btnStyleDel deleteStoreSeat"   data-id="'+cold['id']+'"   href="javascript:;">删除</a>'
                               +'<a class="btnStyle"  href="/h5/warehouse/storeseatview?id='+cold['id']+'" >查看详情</a>'
                               +'</div>'
                               +'</div>';
                       }
                       li.innerHTML=str;
                       fragment.appendChild(li);
                   }
                    if(type==0){
                        ul.appendChild(fragment);
                    }else{
                        $(ul).find('li').remove();
                        ul.appendChild(fragment);
                    }
                  
                   self.endPullUpToRefresh();

               }
           }
            
        });  
 
};

//点击每个各自内容的选项卡中的开始搜索按钮,放在一个函数内,在下拉加载的时候调用
function clickChange(ul, index,self,pageNum,type){
    //搜索仓库
    $('#searchStore').click(function () {
        otherdata={
            code: $("#storecode").val(),
            full_name: $("#storename").val(),
            linkman: $("#linkman").val()
        };
        createFragment(ul, index,self,pageNum,type);
        $("#storecode").val('');
        $("#storename").val('');
        $("#linkman").val('');
    });

}
function clickChange1(ul, index,self,pageNum,type){
    //搜索库区
    $('#searchStoreArea').click(function () {
        otherdata={
            store_name: $("#area-store-id").val(),
            name: $("#areaname").val(),
            area: $("#store-area").val()
        };
        createFragment(ul, index,self,pageNum,type);
        $("#area-store-id").val('');
        $("#areaname").val('');
        $("#store-area").val('');
    })

}
function clickChange2(ul, index,self,pageNum,type){
   
    //搜索库位
    $('#searchStoreaSeat').click(function () {
        otherdata={
            name: $("#seatname").val(),
            store_name: $("#seat-store-id").val(),
            area_name: $("#seat-area-id").val()
        };
        createFragment(ul, index,self,pageNum,type);
        $("#seatname").val('');
        $("#seat-store-id").val('');
        $("#seat-area-id").val('');
    });

}


   /*选项卡切换*/
   mui('.titleList').on('tap','a',function(){
    $('.searchBGf').eq($(this).index()).removeClass('none').siblings().addClass('none');
});


/*仓库删除*/
    $(document).on('click','.deleteStore',function(){
        var id=$(this).attr('data-id');
        $.ajax({
            url: '/h5/warehouse/store/delete',
            async: false,//同步,会阻塞操作
            type: 'POST',//PUT DELETE POST
            data: {id:id},
            success: function (info) {
                if(info.status == 1){
                    $("#store"+id).remove();
                }else{
                    mui.toast(info.message);
                }

            },
            error: function () {
            }
        })

    });


/*库区删除*/
$(document).on('click','.deleteStoreArea',function(){
    var id=$(this).attr('data-id');
    $.ajax({
        url: '/h5/warehouse/storearea/delete',
        async: false,//同步,会阻塞操作
        type: 'POST',//PUT DELETE POST
        data: {id:id},
        success: function (info) {
            if(info.status == 1){
                $("#storearea"+id).remove();
            }else{
                mui.toast(info.message);
            }
        },
        error: function () {
        }
    })
});
/*库位删除*/
$(document).on('click','.deleteStoreSeat',function(){
    var id=$(this).attr('data-id');
    $.ajax({
        url: '/h5/warehouse/storeseat/delete',
        async: false,//同步,会阻塞操作
        type: 'POST',//PUT DELETE POST
        data: {id:id},
        success: function (info) {
            if(info.status == 1){
                $("#storeseat"+id).remove();
            }else{
                mui.toast(info.message);
            }
        },
        error: function () {
        }
    })

});

做重点描述
1.点击搜索后,一定要把字符串中的数据替换掉,否则,会插入到底部,并且不能下拉
2.多个选项卡走的不同的接口,但是点击搜索的时候,要在将函数放在下拉函数的callback中,否则,每触发一次点击,则每个接口都会触发,但我们只需要一个接口触发一次。
3.点击搜索后,要清空搜索条件,否则,再次点击搜索的时候,会把新旧条件一起触发。
4.要将每一个点击的搜索条件放在不同的函数中。如果放到一个,那搜索条件会同为一个搜索条件,会触发多次请求。

mui:选项卡切换+下拉刷新+数据加载进阶版(点击开始搜索,搜索内容)

mui:选项卡切换+下拉刷新+数据加载进阶版(点击开始搜索,搜索内容)