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

Myth丶恋晨 2022-02-05 01:53 157阅读 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>