引言
下拉刷新与上拉加载功能可谓是现在APP开发的两个常见功能,在电脑端我们常常通过点击分页的形式来向用户展示更多内容,不过在移动端我们可不想有这些多余的点击操作,只要想看更多内容只要下拉话上拉就可以了,这个小技巧可以大大的提高用户体验,下面我们来简单的了解一下MUI是如何实现这两种功能的。
关键点1:
初始化下拉刷新与上拉加载功能
mui.init({
pullRefresh: {
container: '#refreshContainer',
down: {
callback: pulldownfresh // 下拉刷新
},
up: {
callback: pullupfresh // 上拉加载
}
}
});
关键点2:
定义下拉刷新与上拉加载的容器
<div class="mui-content">
<!--下拉刷新/上拉加载开始-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--执行上拉刷新或下拉加载的业务逻辑-->
</div>
</div>
<!--下拉刷新/上拉加载结束-->
</div>
关键点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>