最近在用mui开发APP的时候,发现很多地方用到了选项卡切换+下拉刷新的功能,而且要让技术配合调用数据,官网上的这个效果只有静态的,而且每次切换不会重新加载数据,也就是刷新数据,所以我们需要自己去改装。刚开始的时候也就只有一个页面有这个功能,所以没有去管它,后面越加越多需要这种效果,导致博主没辙,直接给它弄成共用方法封装起来直接调用,避免代码冗余。说了这么多开始正题吧!

效果:

MUI选项卡切换+下拉刷新+切换重新加载刷新(结合数据调用自己封装可用)-Monkey前端博客

JavaScript代码:

//阻尼系数
var deceleration = mui.os.ios?0.003:0.0009;
mui('.mui-scroll-wrapper').scroll({
	bounce: false,
	indicators: true, //是否显示滚动条
	deceleration:deceleration
});
//每次下拉加载条数
var pagesize=2;
var count = 0;
//滑动初始加载
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
	var this_ul = $('.mui-slider').find('.mui-slider-group').find('.mui-slider-item').eq(event.detail.slideNumber).find('.mui-table-view');
	var this_page = this_ul.attr('tappage');
	if(this_page == '1') {
		var this_tem = this_ul.attr('tapcon');
		var this_catid = $(".slidertab a").eq(event.detail.slideNumber).attr("tapcat");
		var ajax_url = $(".slidertab a").eq(event.detail.slideNumber).attr("tapurl");
		var ul = this_ul.get(0);
		ajax_load(ajax_url, ul, this_tem, this_catid, this_page, pagesize);
	}
}); 
//循环初始化所有下拉刷新,上拉加载。
$.each($('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
	//初始化加载第一个tab
	if(index=='0'){
		first_ul = this.querySelector('.mui-table-view');
		var first_page = first_ul.getAttribute('tappage');
		var first_tem = first_ul.getAttribute('tapcon');
		if(first_page=='1'){
			var first_catid = $(".slidertab a").eq(index).attr("tapcat");
			var ajax_url = $(".slidertab a").eq(index).attr("tapurl");
			ajax_load(ajax_url, first_ul, first_tem, first_catid, first_page, pagesize);
		
		}
	}
	mui(pullRefreshEl).pullToRefresh({
		up: {
			contentrefresh: '正在加载...',
			contentnomore:'没有更多数据了',
			callback: function() { 
				var self = this;
				setTimeout(function() {
					var ul = self.element.querySelector('.mui-table-view');
					var tappage = ul.getAttribute('tappage');
					var temid = ul.getAttribute('tapcon');
					var num=ul.getAttribute('tapcount');
					var pullSize = num/2;
					var catid = $(".slidertab a").eq(index).attr("tapcat");
					var ajax_url = $(".slidertab a").eq(index).attr("tapurl");
					ajax_load(ajax_url, ul, temid, catid, tappage, pagesize);
					self.endPullUpToRefresh(++ count>pullSize);
				}, 1000);
			}
		}
	});
});

上面代码可以看出有个调用了ajax_load方法,这个就是我们前面强调的封装方法,下拉后的加载数据,具体代码如下:

封装代码:

/**
 * @description 异步加载配合 template.js共用
 * 这是一个方法描述
 * @param {String} url 请求地址(不带域名)
 * @param {Object} ul 关联的容器
 * @param {String} temid template.js对应的ID
 * @param {String} catid 请求参数
 * @param {String} page 请求的起始页
 * @param {String} pagesize 每页加载数目
 * @example 
 * ajax_load('/index.php?g=home&m=index',ul,'index_host_list','1,2',1,10);
 */
function ajax_load(url, ul, temid, catid, page, pagesize) {
	plus.nativeUI.showWaiting('数据加载中...');
	var temid = temid,
		cid = catid,
		p = page;
	mui.ajax({
		url: HOST_URL + url,
		data: {
			cid: cid,
			page: p,
			psize: pagesize,
		},
		dataType: 'json', //服务器返回json格式数据
		type: 'post', //HTTP请求类型
		timeout: 10000, //超时时间设置为10秒
		success: function(DT) {
			plus.nativeUI.closeWaiting();
			//服务器返回响应,根据响应结果,分析是否登录成功;
			if(DT.status != '1') {
				mui.toast(DT.info);
			} else {
				var html = template(temid, DT);
				if(p > 0) {
					$('.' + temid).append(html);
				} else {
					$('.' + temid).html(html);
				}
				if(ul && ul.getAttribute('tappage') != '') {
					ul.setAttribute('tappage', parseInt(p) + 1);
				}
				if(ul && ul.getAttribute('tapcount') != '') {
					ul.setAttribute('tapcount', DT.count);
				}
			}
		},
		error: function(xhr, type, errorThrown) {
			plus.nativeUI.closeWaiting();
			//异常处理;
			mui.toast('获取数据失败,请检查网络连接');
		}
	});
};

完成后就能实现我们想要的选项卡切换+下拉刷新效果,且切换还能刷新数据,加载数据。需要的朋友请下载下面的链接即可使用。

[url href=链接地址]MUI选项卡切换+下拉刷新+切换重新加载刷新demo[/url]