MUI实现上拉加载和下拉刷新效果

最新推荐文章于 2022-03-17 14:06:52 发布

橙乐果果

最新推荐文章于 2022-03-17 14:06:52 发布

阅读量1.7k

点赞数 2

分类专栏： MUI

本文链接：https://blog.csdn.net/weixin_38407595/article/details/87258534

版权

MUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

现在大部分APP都会有上拉加载和下拉刷新功能，加载数据，分页渲染到页面上。MUI实现起来也是非常简单的。

HTML：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>单 webview 模式</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			.mui-navigate-right{
				color: #DEB887;
				font-size: 14px;
			}
			span{
				font-size: 14px;
				color: #BC8F8F;
				
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">单 webview 模式</h1>
		</header>
		<div class="mui-content">
			
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<ul class="mui-table-view mui-table-view-chevron"></ul>
				</div>
			</div>
		</div>

Javascript:

<script src="js/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/fefresh.js"></script>
		
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',//下拉刷新容器标识,css选择器均可
					down: {
						style:'circle',//下拉刷新样式,目前支持原生5+ ‘circle’ 样式
						color:'#FFB6C1',//默认“#2BD009” 下拉刷新控件颜色
						callback: pulldownRefresh//刷新函数,比如通过ajax从服务器获取新数据
					},
					up: {
						auto:true,//首次加载自动上拉加载一次
						contentrefresh: '快乐的加载中...',//正在加载状态时,控件上显示的标题内容
						contentnomore:'没有更多的数据啦',//请求完毕若没有更多数据时显示的提醒内容
						callback: pullupRefresh//刷新函数,比如通过ajax从服务器获取新数据
					}
				}
			});
			
			
			
			/**
			 * 上拉显示更多
			 */
			var count = 0;//次数(++小于↓总页码)
			var currentPage = 1;//当前页(++)
			var totalPageNum=1;//总页码(return)
			
			function pullupRefresh() {
				setTimeout(function() {
					//参数为true代表没有更多数据啦
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > totalPageNum)); 
					var table = document.body.querySelector('.mui-table-view');
					/**
					 * Send Ajax
					 */
					var data= {
						'page':currentPage
					}
					var url = '/orange/user/moneystream';
					mui.ajax({
						url,
					    data:data,
                    	                 dataType: 'json', 
						contentType: "application/json",
						type: 'post', 
						headers: {
							'Content-Type': 'application/json'
						},
						success: function(data) {
							if (data.code == 0) {
								if (data.result.moneystream.length > 0) {
									//总条数
									totalPageNum=data.result.totalPageNum;
									for (var i = 0; i < data.result.moneystream.length; i++) {
										var day=data.result.moneystream[i].writetime;
										var li = document.createElement('li');
										li.className = 'mui-table-view-cell';
										li.innerHTML = '\
										<li>\
											<a class="mui-navigate-right">\
												$:' + (data.result.moneystream[i].money) + '.00\
											</a>\
											<br/><span>'+day+'</span>\
										</li>';
										table.appendChild(li);
									}
									currentPage++;
								}
								
							} else {
								mui.toast(data.msg);
							}
						},
						headers: {
							'Access-Control-Allow-Headers': 'X-Requested-With'
						}
					});
				}, 600);
			}

			/**
			 * 下拉刷新
			 */
			function pulldownRefresh() {
				//直接页面刷新,偷懒哈哈
				window.location.reload();
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
			}
			
			//重置上拉加载
			//mui('#pullup-container').pullRefresh().refresh(true);
			
			//禁用上拉刷新
			// mui('#pullup-container').pullRefresh().disablePullupToRefresh();
			
			//启用上拉刷新
			//mui('#pullup-container').pullRefresh().enablePullupToRefresh();
			
			//页面禁用下拉刷新动作
// 			mui.plusReady(function() {
// 				plus.webview.currentWebview().setPullToRefresh({support:false});
// 			});
			
		</script>
	</body>

</html>

其他页面禁用下拉刷新

    <script type="text/javascript">
	  mui.init()
	  mui.plusReady(function() {
	        plus.webview.currentWebview().setPullToRefresh({support:false});
        });		
    </script>

JAVA:

  int limit = StringUtils.isEmpty(json.getString("limit")) ? 15 :         
  Integer.parseInt(json.getString("limit"));
  int page = StringUtils.isEmpty(json.getString("page")) ? 1 : 
  Integer.parseInt(json.getString("page"));

  /**
   * 分页查询，上拉显示更多
   * 传过来当前页，返回分页参数对象
   */
  Page<MoneyStreamEntity>pageList=MoneyStreamService.selectPage(new Page<>(page,limit),
       new EntityWrapper<MoneyStreamEntity>().orderBy("time").last("desc"));
			
		List<MoneyStreamEntity>list=pageList.getRecords();
		int total=pageList.getTotal();
		int totalPageNum = (total  +  limit  - 1) / limit;
		
		resObj.put("moneystream", list);
		resObj.put("totalPageNum", totalPageNum-1);

学习视频链接：https://blog.csdn.net/weixin_38407595/article/details/102561868

橙乐果果

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
MUI实现上拉加载和下拉刷新效果

现在大部分APP都会有上拉加载和下拉刷新功能，加载数据，分页渲染到页面上。MUI实现起来也是非常简单的。HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>单 webview 模式</title> &...
复制链接

扫一扫

专栏目录