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.要将每一个点击的搜索条件放在不同的函数中。如果放到一个,那搜索条件会同为一个搜索条件,会触发多次请求。