主页 > 编程资料 > 编程更多 >
发布时间:2016-03-04 作者:网络 阅读:811次

为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画;在iOS平台,H5的动画已经比较流畅,故依然使用H5方案。两个平台实现虽有差异,但mui经过封装,可使用一套代码实现下拉刷新。


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

mui.init({     subpages:[{       url:pullrefresh-subpage-url,//下拉刷新内容页面地址       id:pullrefresh-subpage-id,//内容页面标志       styles:{         top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算,若使用标准mui导航,顶部默认为48px;         .....//其它参数定义       }     }]   });

iOS平台的下拉刷新,使用的是mui封装的区域滚动组件, 为保证两个平台的DOM结构一致,内容页面需统一按照如下DOM结构构建:

<!--下拉刷新容器--> <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 : {       contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容       contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容       contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容       callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;     }   } });

下拉刷新是mui框架的一个插件,该插件目前有下拉刷新结束、滚动到特定位置两个方法;

下拉刷新结束

在下拉刷新过程中,当获取新数据后,需要执行endPulldownToRefresh方法, 该方法的作用是关闭“正在刷新”的雪花进度提示,内容区域回滚顶部位置,如下:。

function pullfresh-function() {      //业务逻辑代码,比如通过ajax从服务器获取新数据;      ......      //注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后      mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); }

滚动到特定位置

下拉刷新组件滚动到特定位置的方法类似区域滚动组件

示例:在hello mui下拉刷新示例中,实现了双击标题栏,让列表快速回滚到顶部的功能;代码如下:

var contentWebview = null; //监听标题栏的双击事件 document.querySelector('header').addEventListener('doubletap',function () { if(contentWebview==null){ contentWebview = plus.webview.currentWebview().children()[0]; } //内容区滚动到顶部 contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)"); });




关键字词:mui框架  

相关文章

必填

◎已有0人评论

加载更多