mui实现上拉刷新与下拉加载功能

曾经终败给现在 2021-10-19 03:12 656阅读 0赞

## 引言 ##

下拉刷新与上拉加载功能可谓是现在APP开发的两个常见功能，在电脑端我们常常通过点击分页的形式来向用户展示更多内容，不过在移动端我们可不想有这些多余的点击操作，只要想看更多内容只要下拉话上拉就可以了，这个小技巧可以大大的提高用户体验，下面我们来简单的了解一下MUI是如何实现这两种功能的。

**关键点1：**

初始化下拉刷新与上拉加载功能

mui.init({
    	pullRefresh: {
    		container: '#refreshContainer',
    		down: {
    			callback: pulldownfresh  // 下拉刷新
    		},
    		up: {
    			callback: pullupfresh    // 上拉加载
    		}
    	}
    });

** 关键点2：**

定义下拉刷新与上拉加载的容器

**关键点3：**

编写下拉刷新逻辑，这里一般的逻辑都是通过ajax向后端获取更多数据，然后再显示到前端上。

function pulldownfresh() {
    	// 业务逻辑开始
    
    	// 业务逻辑结束
    
    	// 结束下拉刷新
    	this.endPulldownToRefresh();
    }

编写上拉加载逻辑，同下拉刷新一样，这里一般的逻辑也都是通过ajax向后端获取更多数据，然后再显示到前端上。

function pullupfresh() {
    	// 业务逻辑开始
    
    	// 业务逻辑结束
    
    	// 结束上拉加载
    	this.endPullupToRefresh();
    }

**使用案例 **

<!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.css" rel="stylesheet" />
    		<script src="js/mui.js"></script>
    	</head>
    	<body>
    		<div class="mui-content">
    			
    			<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    				<div class="mui-scroll">
    					
    				</div>
    			</div>
    			
    		</div>
    		<script type="text/javascript">
    			mui.init({
    				pullRefresh: {
    					container: '#refreshContainer',
    					down: {
    						callback: pulldownfresh
    					},
    					up: {
    						callback: pullupfresh
    					}
    				}
    			});
    
    			// 上拉刷新
    			function pulldownfresh() {
    				// 业务逻辑开始
    
    				// 业务逻辑结束
    
    				// 结束下拉刷新
    				this.endPulldownToRefresh();
    			}
    
    			// 下拉加载
    			function pullupfresh() {
    				// 业务逻辑开始
    
    				// 业务逻辑结束
    
    				// 结束上拉加载
    				this.endPullupToRefresh();
    			}
    		</script>
    	</body>
    </html>