DCloud-MUI 下拉刷新与加载更多

下拉刷新

单WebView

实现原理

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

单webview下拉刷新组件使用

优点：

性能更优，体现在两点：

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

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

缺点：

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

使用示例

S1.DOM中加入MUI下拉刷新布局组件

<!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper">      <div class="mui-scroll">          <!--数据列表-->          <ul class="mui-table-view mui-table-view-chevron"></ul>      </div> </div>

S2.JS代码中进行初始化配置

mui.init({   pullRefresh : {     container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等     down : {       style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式       color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色       height:'50px',//可选,默认50px.下拉刷新控件的高度,       range:'100px', //可选 默认100px,控件可下拉拖拽的范围       offset:'0px', //可选 默认0px,下拉刷新控件的起始位置       auto: true,//可选,默认false.首次加载自动上拉刷新一次       callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；     }   } });

 

下拉刷新主要API

N1.启用与禁用下拉刷新-官方已删除描述

    单/双WebView模式使用方法类似，可以通过代码动态设置下拉刷新的启用与禁用。禁用下拉刷新后，下拉容器不会再对下拉手势作出相应，并且不会有下拉回弹效果。

// 禁用 mui('#refreshContainer').pullRefresh().disablePulldownToRefresh(); //启用 mui('#refreshContainer').pullRefresh().enablePulldownToRefresh();

 

N2.下拉刷新结束

    单/双WebView模式使用方法类似，可以通过代码动态设置下拉刷新的启用与禁用。禁用下拉刷新后，下拉容器不会再对下拉手势作出相应，并且不会有下拉回弹效果。

mui('#pullrefresh').pullRefresh().endPulldownToRefresh();

 

 

 

双WebView

实现原理

webview 模式的下拉刷新，创建一个子 webview 添加列表；拖动时，拖动的是一个完整的 webview，避免了类似 DIV 拖动流畅度不好的问题，回弹动画使用原生动画。

模式说明：

优点：

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

缺点：

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

DOM结构需要统一配置

双WebView模式使用

    双WebView模式与单WebView模式使用差别主要在配置参数的不同。

双WebView模式配置参数：

mui.init({   pullRefresh : {     container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等     down : {       height:50,//可选,默认50.触发下拉刷新拖动距离,       auto: true,//可选,默认false.首次加载自动下拉刷新一次       contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容       contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容       contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容       callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；     }   } });

 

参考：

    http://dev.dcloud.net.cn/mui/pulldown/

 

 

 

上拉加载

实现功能

页面滚动到底，显示“正在加载...”提示（mui框架提供）

执行加载业务数据逻辑（开发者提供）

加载完毕，隐藏"正在加载"提示（mui框架提供）

使用示例

S1.DOM中加入MUI下拉刷新布局组件