为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); 通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画;在iOS平台,H5的动画已经比较流畅,故依然使用H5方案。
主要步骤:
第一步: 创建主页面freshpage.html、子页面freshpage_subpage.html,在主页面中创建子页面,因为拖动的其实是个子页面的整体,主页面代码如下:
mui.init({
gestureConfig: {
tap: true, //默认为true
doubletap: true, //默认为false,开启双击手势
},
subpages: [{
url: "freshpagesub.html", //下拉刷新内容页面地址
id: "freshpagesub", //内容页面标志
styles: {
top: '44px', //内容页面顶部位置,需根据实际页面布局计算
}
}]
});
第二步:子页面中的内容需设置一个id="pullrefresh"的容器
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">2</li>
<li class="mui-table-view-cell">3</li>
<li class="mui-table-view-cell">4</li>
</ul>
</div>
</div>
第三步:子页面通过mui.init方法中pullRefresh参数配置下拉刷新各项参数
mui.init({
pullRefresh: {
container: "#pullrefresh", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
// 下拉刷新
down: {
contentdown: "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback: downFn //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
},
1、当下拉时,最先出现“下拉可以刷新”;2、再往下拉出现“释放立即刷新”;3:释放之后会一直出现“正在刷新”
第四步:设置执行函数,在下拉刷新过程中,当获取新数据后,都需要执行 endPulldown
方法, 该方法的作用是关闭“正在刷新”的样式提示,内容区域回滚顶部位置:
// 下拉刷新函数
function downFn() {
//业务逻辑代码,比如通过ajax从服务器获取新数据; ......
//注意,加载完新数据后,必须执行如下代码,
//注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
alert('释放立即刷新执行完毕');
// 模拟
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //这行代码会隐藏掉 “正在加载...” 容器
}, 3000);
}
第五步:mui的上拉加载和下拉刷新类似,都属于pullRefresh
插件,使用过程如下:
- 1、页面滚动到底,显示“正在加载...”提示(mui框架提供)
- 2、执行加载业务数据逻辑(开发者提供)
- 3、加载完毕,隐藏"正在加载"提示(mui框架提供)
第六步:在主页面双击标题栏,让列表快速回滚到顶部,在init()方法中要开启双击功能
// 实现双击标题栏,让列表快速回滚到顶部
mui.plusReady(function(){
var contentWebview = null;
//监听标题栏的双击事件
document.querySelector('header').addEventListener('doubletap', function() {
if (contentWebview == null) {
contentWebview = plus.webview.currentWebview().children()[0];
}
//内容区滚动到顶部
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
});
主页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</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">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<style type="text/css">
.mui-bar-nav~.mui-content .mui-pull-top-pocket {
top: 180px !important;
}
</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">下拉刷新和上拉加载主页面</h1>
</header>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
gestureConfig: {
tap: true, //默认为true
doubletap: true, //默认为false
},
subpages: [{
url: "freshpagesub.html", //下拉刷新内容页面地址
id: "freshpagesub", //内容页面标志
styles: {
top: '44px', //内容页面顶部位置,需根据实际页面布局计算
}
}]
});
// 实现双击标题栏,让列表快速回滚到顶部
mui.plusReady(function(){
var contentWebview = null;
//监听标题栏的双击事件
document.querySelector('header').addEventListener('doubletap', function() {
if (contentWebview == null) {
contentWebview = plus.webview.currentWebview().children()[0];
}
//内容区滚动到顶部
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
});
</script>
</body>
</html>
子页面代码
<!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.min.css" rel="stylesheet" />
<style type="text/css">
ul li{
height: 200px;
}
</style>
</head>
<body>
<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">
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">2</li>
<li class="mui-table-view-cell">3</li>
<li class="mui-table-view-cell">4</li>
</ul>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
gestureConfig: {
tap: true, //默认为true
doubletap: true, //默认为false
},
pullRefresh: {
container: "#pullrefresh", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
// 下拉刷新
down: {
height:50,//可选,默认50.触发下拉刷新拖动距离,
// auto: true //可选,默认false.首次加载自动上拉加载一次
contentdown: "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback: downFn //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
},
// 上拉加载
up: {
contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;
callback: upFn //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
// 下拉刷新函数
function downFn() {
//业务逻辑代码,比如通过ajax从服务器获取新数据; ......
//注意,加载完新数据后,必须执行如下代码,
//注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
alert('释放立即刷新执行完毕');
// 模拟
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //这行代码会隐藏掉 “正在加载...” 容器
}, 3000);
}
// 上拉加载函数
function upFn() {
//业务逻辑代码,比如通过ajax从服务器获取新数据; ......
// 两个注意事项:
//1、若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后 //
//2、注意this的作用域, 若存在匿名函数, 需将this复制后使用
alert('上拉加载触发了...');
var _this = this;
//endPullupToRefresh(true|false),true:没有更多数据;false:有数据
_this.endPullupToRefresh(false);
}
</script>
</body>
</html>