mui中双webView的刷新

最近在用mui做一个移动app的时候，需要实现下拉刷新的功能，用双webView模式实现

1、单webView模式

  下拉刷新时，触发的是原生下拉刷新控件，而整个webview位置不会发生变化，所以不会在拖动过程中发生DOM重绘，当控件拖动到一定位置触发动态加载数据以及刷新操作。此模式下拉刷新，相比双webview 模式，不创建额外 webview，性能更优。

• 优点：
  • 性能更优，体现在两点：
    1. 相比双webview，不创建额外子 webview 性能消耗更少
    2. 下拉拖动过程中不会发生重绘，也减少了性能消耗
• 缺点：
  • 目前仅支持‘cricle’样式以及该样式的颜色自定义

2、双webView模式

  使用双 webview 模式的下拉刷新，创建一个子 webview 添加列表；拖动时，拖动的是一个完整的 webview，避免了类似 DIV 拖动流畅度不好的问题，回弹动画使用原生动画；在 iOS 平台，H5 的动画已经比较流畅，故依然使用 H5 方案。两个平台实现虽有差异，但 mui 经过封装，可使用一套代码实现下拉刷新。

• 优点：
  • 可自定义下拉刷新样式，更改文字等等.参考关于自定义下拉刷新样式问答
• 缺点：
  • 相比单 webview，性能消耗更大，不过都比 div 模式的要好用
  • DOM结构需要统一配置

3、双webView模式下实现下拉刷新

主页面：

mui.init({
                //设置可以单手和双手触摸下拉
				gestureConfig: {
					tap: true, //默认为true 
					doubletap: true, //默认为false 
}

 子页面

<!--下拉刷新容器-->
			<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({
				gestureConfig: {
					tap: true, //默认为true 
					doubletap: true, //默认为false 
				},
				pullRefresh: {
					container: "#pullrefresh", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等 
					// 下拉刷新
					down: {
						 height:36,//可选,默认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(); //这行代码会隐藏掉 “正在加载...” 容器
				}, 1000);
			}

注意：主页面在刷新子页面时，顶部选项卡部分，可能会被子页面覆盖，需要在主页面添加css样式，可以设置高度调整

.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
				top: 80px !important;
			}