mui 上下拉刷新pullRefresh

mui 上下拉刷新pullRefresh,例子

 

<!doctype html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<style type="text/css">
			li {
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color: #bbb;
				text-indent: 4%;
				border-bottom: 1px solid currentColor;
			}
		</style>
	</head>
	<body>
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron" id="list">

				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		var dataJson = {
			"header": {
				"ret": "S"
			},
			"data":[
				{
					"article_id":"12333333",
					"article_img":["images/ad2.jpg","images/ad3.jpg"],
					"article_tile":"fdsfsdffsdgsdgdf",
					"article_content":"fdsfsdffsdgsdgdf",
					"article_summart":"",
					"article_ot":"2020-08-05 12:12:12",
					"article_reader":12,
					"article_display":"1"
					
				},
				{
					"article_id":"12333333",
					"article_img":["images/ad2.jpg","images/ad3.jpg"],
					"article_tile":"fdsfsdffsdgsdgdf",
					"article_content":"fdsfsdffsdgsdgdf",
					"article_summart":"",
					"article_ot":"2020-08-05 12:12:12",
					"article_reader":12,
					"article_display":"1"
					
				},
				{
					"article_id":"12333333",
					"article_img":["images/ad2.jpg","images/ad3.jpg"],
					"article_tile":"fdsfsdffsdgsdgdf",
					"article_content":"fdsfsdffsdgsdgdf",
					"article_summart":"",
					"article_ot":"2020-08-05 12:12:12",
					"article_reader":12,
					"article_display":"1"
					
				},
				{
					"article_id":"12333333",
					"article_img":["images/ad2.jpg","images/ad3.jpg"],
					"article_tile":"fdsfsdffsdgsdgdf",
					"article_content":"fdsfsdffsdgsdgdf",
					"article_summart":"",
					"article_ot":"2020-08-05 12:12:12",
					"article_reader":12,
					"article_display":"1"
					
				}
			],
			"ext":"890"
		}
		var pager = {}; //分页
		var totalPage; //总页码
		pullRefresh(pager); //启用上拉下拉 
		function pullRefresh() {
			mui("#refreshContainer").pullRefresh({
				up: {
					contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
					contentnomore: '没 有 更 多 数 据 了', //可选,请求完毕若没有更多数据时显示的提醒内容;
					callback: function() { //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
						window.setTimeout(function() {
							getData(pager);
						}, 500);
					}
				},
				down: {
					height: 50, //可选,默认50.触发下拉刷新拖动距离,
					auto: true, //可选,默认false.首次加载自动下拉刷新一次
					contentdown: "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
					contentover: "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
					contentrefresh: "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容
					callback: function() { //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
						window.setTimeout(function() {
							pager['size'] = 3; //条数
							pager['page'] = 1; //页码      
							//刷新要先清空父节点里面的子节点
							var f = document.getElementById("list");
							var childs = f.childNodes;
							for (var i = childs.length - 1; i >= 0; i--) {
								f.removeChild(childs[i]);
							}
							getData(pager);
						}, 500);
					}
				}
			})
		}
		//这个方法是负责向接口请求数据的,你可以选择你喜欢的方式,我这里是直接用的mui.ajax
		function getData(params) {
			mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
			//下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
			var returnData = dataJson.data;
			var element = document.getElementById("list");
			var para;
			var node;
			for (var i = 0; i < returnData.length; i++) {
				para = document.createElement("li");
				node = document.createTextNode(returnData[i].article_tile)
				para.appendChild(node);
				element.appendChild(para);
			}
			
			//这里很重要,这里获取页码 公式:总条数/每页显示条数 (这里的处理是根据接口返回数据来做的处理 最下面有接口返回数据的格式)
			totalPage = dataJson.ext % pager.size != 0 ? parseInt(dataJson.ext / pager.size) + 1 : dataJson.ext / pager.size;
			if (totalPage == pager.page) { //总页码等于当前页码,停止上拉下拉
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
			} else {
				pager.page++;
				mui('#refreshContainer').pullRefresh().refresh(true);
			}
		}
		function getData2(params) {
			mui.ajax("/article/getArticlePage", {
				data: {
					"header": {
						"os": "wap",
						"app": "xxxx",
						"ver": 1.0
					},
					"data": params
				},
				dataType: 'json',
				type: 'post',
				headers: {
					'Content-Type': 'application/json'
				},
				success: function(data) {
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
					//下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
					var returnData = data.data;
					var element = document.getElementById("list");
					var para;
					var node;
					for (var i = 0; i < returnData.length; i++) {
						para = document.createElement("li");
						node = document.createTextNode(returnData[i].article_title)
						para.appendChild(node);
						element.appendChild(para);
					}

					//这里很重要,这里获取页码 公式:总条数/每页显示条数 (这里的处理是根据接口返回数据来做的处理 最下面有接口返回数据的格式)
					totalPage = data.ext % pager.size != 0 ? parseInt(data.ext / pager.size) + 1 : data.ext / pager.size;
					if (totalPage == pager.page) { //总页码等于当前页码,停止上拉下拉
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
					} else {
						pager.page++;
						mui('#refreshContainer').pullRefresh().refresh(true);
					}
				},
				error: function(xhr, type, errorThrown) {
					//异常处理;
					console.log(type);
				}
			})
		}
	</script>
</html>

 

这是一款基于mui框架制作的选项卡切换和下拉刷新加载数据列表代码,手机移动端选项卡切换插件,触屏滑动下拉刷新代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrapper').scroll({ bounce: false, indicators: true, //是否显示滚动条 deceleration:deceleration }); $.ready(function() { //循环初始化所有下拉刷新,上拉加载。 $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) { $(pullRefreshEl).pullToRefresh({ down: { callback: function() { var self = this; setTimeout(function() { var ul = self.element.querySelector('.mui-table-view'); ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild); self.endPullDownToRefresh(); }, 1000); } }, up: { callback: function() { var self = this; setTimeout(function() { var ul = self.element.querySelector('.mui-table-view'); ul.appendChild(createFragment(ul, index, 5)); self.endPullUpToRefresh(); }, 1000); } } }); }); var createFragment = function(ul, index, count, reverse) { var length = ul.querySelectorAll('li').length; var fragment = document.createDocumentFragment(); var li; for (var i = 0; i < count; i ) { li = document.createElement('li'); li.className = 'mui-table-view-cell'; li[removed] = '第' (index 1) '个选项卡子项-' (length (reverse ? (count - i) : (i 1))); fragment.appendChild(li); } return fragment; }; }); })(mui); [removed]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值