为实现下拉刷新功能,大多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:
<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>
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();//下拉刷新结束之后。回到顶部
}
<div id="refreshContainer" 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" >Item 111111</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 9</li>
</ul>
</div>
</div>