MUI 下拉刷新

为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画；在iOS平台，H5的动画已经比较流畅，故依然使用H5方案。两个平台实现虽有差异，但mui经过封装，可使用一套代码实现下拉刷新。 MUI本身是在IOS UI的基础上拓展Android的。所以在IOS上的适合度高于安卓。

例子：有index.html 和 list.html两个页面，list用于存放数据，而index主要作为一个框架存放头部和尾部。

index.html:

主页面和子页面解决滚动卡顿的问题

mui.init({
		    subpages:[{
		      url:'list.html',//下拉刷新内容页面地址
		      id:'haha',//内容页面标志
		      styles:{
		        top:'40px',
		        bottom:'0px'
		      }
		    }]  
  });

list.html

	mui.init({
				pullRefresh : {
		    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      height:50,//可选,默认50.触发下拉刷新拖动距离,
		      auto: true,//可选,默认false.自动下拉刷新一次
		      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
		      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
		      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
		     callback :show //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    
		    
		  }}
		    
				
				
			});
			function show()
			{
				console.log(1);//这里用来写逻辑，从服务器上获取最新数据并更新
				mui('#refreshContainer').pullRefresh().endPulldownToRefresh();//下拉刷新结束之后。回到顶部
				
			}

Item 111111Item 2Item 3Item 1Item 2Item 1Item 1Item 9