mui下拉刷新

下拉刷新

概述：

为实现下拉刷新功能，大多数 H5 框架都是通过 DIV 模拟下拉回弹动画，在低端 android 手机上，DIV 动画经常出现卡顿现象（特别是图文列表的情况); mui 通过使用原生 webview 下拉刷新解决这个 DIV 动画的卡顿问题，并且拖动效果更加流畅；

这里提供两种模式的下拉刷新，以适用不同场景：

单webview 模式和双 webview 模式

单webview 模式的优点：

性能更优，体现在两点：

相比双webview，不创建额外子 webview 性能消耗更少

下拉拖动过程中不会发生重绘，也减少了性能消耗

缺点：

目前仅支持‘cricle’样式以及该样式的颜色自定义

双webview 模式的优点：

可自定义下拉刷新样式，更改文字等等.参考关于自定义下拉刷新样式问答

缺点：

相比单 webview，性能消耗更大，不过都比 div 模式的要好用

DOM结构需要统一配置

下面说下双 webview 模式的例子

动画原理：

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

使用方法：

主页面内容比较简单，只需要创建子页面即可

<!--下拉刷新容器-->

<div id="refreshContainer" class="mui-content mui-scroll-wrapper">

<div class="mui-scroll">

     <!--数据列表-->

     <ul class="mui-table-view mui-table-view-chevron">

      

      </ul>

</div>

</div>

其次，通过 mui.init 方法中 pullRefresh 参数配置下拉刷新各项参数，如下：

mui.init({

pullRefresh : {

container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等

down : {

auto: false,//可选,默认false.首次加载自动下拉刷新一次

contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容

  contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容

contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容

 callback :callfunction //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

}

}

});

下拉刷新结束：

两种模式在下拉刷新过程中，当获取新数据后，都需要执行 endPulldown 方法， 该方法的作用是关闭“正在刷新”的样式提示，内容区域回滚顶部位置，如下：

function callfunction() {

setTimeout(function () {//定时器，提升用户体验

$("#Delete li").remove();

getLocalStorage();

  mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); /完成刷新

}, 1000);

}