移动app双webview单栏下拉刷新上拉加载

最新推荐文章于 2024-08-21 10:44:32 发布

jjy8040

最新推荐文章于 2024-08-21 10:44:32 发布

阅读量335

点赞数

分类专栏：实际使用

本文链接：https://blog.csdn.net/jjy8040/article/details/89812757

版权

实际使用专栏收录该内容

23 篇文章 0 订阅

订阅专栏

父页面：

<div id="content" class="content">
</div>

mui.init({
	subpages:[{
		url:'fSub.html',
		id:'fSub.html',
		styles:{
			top: '45px',
			bottom: '0px',
		}
	}]
});

子页面：

<body>
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper" pageNumber="0" totalPages="0">
	    <div class="mui-scroll" id="content" style="background-color: #fff;">

		</div>
		<script id="test" type="text/html">
			<div class="chargingcardlists" onclick="goPage('bycd-buyRecordInfo.html',{{id}})">
				<img src="img/t3.png" style="width: 50px; float: left; margin-right: 10px;" />
				<p class="chargingcard">充值</p>
				<p class="time">{{time}}</p>
				<span class="money">+{{price}}</span>
			</div>
		</script>
	</div>

	<script src="js/mui.min.js"></script>
	<script src="js/jquery-2.2.0.min.js"></script>
	<script type="text/javascript" src="js/click.js"></script>
	<script src="js/template-web.js"></script>
        <script src="js/base.js"></script>
	<script>
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				up: {
					callback: pullupRefresh
				},
				down: {
					callback: pulldownRefresh
				}
			}
		});
		mui.plusReady(function() {
			cardOrderList('1');
		});
			
		function pulldownRefresh() {
			setTimeout(function() {
				cardOrderList("1");
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				mui('#pullrefresh').pullRefresh().refresh(true);
			}, 1500);
		}

		function pullupRefresh() {
			setTimeout(function() {
				pageNumber = $("#pullrefresh").attr("pageNumber");
				totalPages = $("#pullrefresh").attr("totalPages");
				console.log("pageNumber:" + pageNumber);
				console.log("totalPages:" + totalPages);
				if(pageNumber >= totalPages) {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
					return;
				} else {
					// 非最后一页，则请求下一页
					pageNumber++;
				}
				mui('#pullrefresh').pullRefresh().refresh(true);
				cardOrderList(pageNumber);
			}, 1500);
		}

		function cardOrderList(pageNum) {
			$.ajax({
				type: 'post',
				dataType: 'json',
				url: IP + "/mobile/cardOrder/list.html",
				data: {
					token: plus.storage.getItem("token"),
					pageSize: '20',
					pageNumber: pageNum,
					status:"已付款"
				},
				success: function(data) {
					if(pageNum === data.data.totalPage) {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
					}
					$("#pullrefresh").attr("totalPages", data.data.totalPage);
					$("#pullrefresh").attr("pageNumber", data.data.pageNumber);
					if(pageNum == 1) {
						$("#content").empty();
					}
					var list = data.data.list;
					if(list.length == 0) {
//						$('#content').append('<div class="noting"><p>暂无购卡记录</p></div>');
						$('#content').css('backgroundColor', '#efeff4');
						$("body .mui-scroll").html("<img src ='img/notificationDefault.png' style='width:100%;'>");
						mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
					}
					console.log(JSON.stringify(data))
					$.each(list, function(i, n) {
						var price = n.price;
						var id = n.id;
						var time = n.time;
						var sn = n.sn;
						var data = {
							price: price,
							id: id,
							time: time,
							sn: sn,
						};
						var html = template('test', data);

						$('#content').append(html);

					});
				},
				error: function() {
					plus.nativeUI.alert(">.< 网络不给力");
				}
			});
		}

		function goPage(page, id) {
			mui.openWindow({
				url: page,
				id: page,
				extras: {
					orderID: id,
				},
			});
		}
	</script>
</body>