本文介绍了一种利用双WebView解决H5在低端Android设备上实现下拉刷新时的卡顿问题的方法，详细解释了如何通过主子页面模式、原生动画及mui框架配置实现流畅的下拉刷新和上拉加载效果。
为实现下拉刷新功能，大多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>
扫一扫
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
