13、下拉刷新

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

第一步: 创建子页面,因为拖动的其实是个子页面的整体

mui.init({ 

    subpages:[{ 

    url:pullrefresh-subpage-url,//下拉刷新内容页面地址 

    id:pullrefresh-subpage-id,//内容页面标志

     styles:{ top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算,若使用标准mui导航,顶部默认为48px; .....//其它参数定义 

     

    }] 

});

 

第二步:内容页面需按照如下DOM结构构建

第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数

mui.init({ 

    pullRefresh : { 

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

        down : {

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

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

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

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

         } } 

});

 

第四步:设置执行函数

function fn() {

     //业务逻辑代码,比如通过ajax从服务器获取新数据; ...... //注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后  

     

     mui(‘#pullrefreshContainer‘).pullRefresh().endPulldownToRefresh();  //这行代码会隐藏掉 正在加载... 容器

     

}

 

时间: 2024-11-03 22:42:45

13、下拉刷新的相关文章

自定义下拉刷新控件

一.功能效果 1.在很多app中,在信息展示页面,当我们向下拖拽时,页面会加载最新的数据,并有一个短暂的提示控件出现,有些会有加载进度条,有些会记录加载日期.条目,有些还带有加载动画.其基本实现原理都相仿,本文中将探讨其实现原理,并封装出一个简单的下拉刷新控件 2.自定义刷新工具简单的示例 二.系统提供的下拉刷新工具 1.iOS6.0以后系统提供了自己的下拉刷新的控件:UIRefreshControl .例如,refreshControl,作为UITableViewController中的一个属

html5+css3实现上拉和下拉刷新

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-sc

Xamarin.Form 下拉刷新动画

好像园子里对 Xamarin 感兴趣的人很少啊... 来, 先给各位爷们逗个笑, 本山大爷本色出演: 照例, 上源码: https://github.com/gruan01/ListViewExtend 目前只有 WP 的效果, Android 还在研究, IOS 的还没计划. ------------------------------------------------------ Xamarin.Form 的 ListView 只支持下拉刷新 (这里有用法), 上拉 加载更多 没有对应的事

简单实现下拉刷新数据

1 #import "AppDelegate.h" 2 #import "SearchController.h" 3 @interface AppDelegate ()<UITableViewDataSource> 4 @property (nonatomic,strong)UITableView *table; 5 @property (nonatomic,strong)NSMutableArray *datas; 6 @property (nonat

android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)

Android实现上拉加载更多功能以及下拉刷新功能, 采用了目前比较火的PullToRefresh,他是目前实现比较好的下拉刷新的类库. 目前他支持的控件有:ListView, ExpandableListView,GridView,WebView等. 下载地址:https://github.com/chrisbanes/Android-PullToRefresh 首先第一步当然是导入libriay到咱们的项目了,具体导入方式,这里不再赘述. 下面是个例子采用的是ListView,当然其余的和这

[Android]下拉刷新控件RefreshableView的实现

需求:自定义一个ViewGroup,实现可以下拉刷新的功能.下拉一定距离后(下拉时显示的界面可以自定义任何复杂的界面)释放手指可以回调刷新的功能,用户处理完刷新的内容后,可以调用方法onCompleteRefresh()通知刷新完毕,然后回归正常状态.效果如下:     源代码:RefreshableView(https://github.com/wangjiegulu/RefreshableView) 分析: 我们的目的是不管什么控件,只要在xml中外面包一层标签,那这个标签下面的所有子标签所

上拉加载下拉刷新控件WaterRefreshLoadMoreView

效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on 13-9-18. // #import <UIKit/UIKit.h> #define kStartTo 0.7f #define kEndTo 0.15f #define kAnimationInterval (1.0f / 50.0f) NS_INLINE CGFloat distansBetween(CGPoint p1 , CGPoint p2) { ret

Android 定制下拉刷新头部 Ultra Pull To Refresh

我们看到手机中的各种APP的花样繁多的下拉刷新是不是有点心动呢,想着自己定制自己的专门的下拉刷新,市场上比如,58同城,京东,天猫,美团等下拉刷新都是在下拉头部执行帧动画,我最近看到一个APP,就是慕课网的Android客户端,平时有时候看这个网站的学习视频,就下了一个,发现它的头部是一个圆形的水波纹效果: 看起来很Cool,正好公司有需求做官网的APP,正好可以用上公司的Logo做一个水波纹的下拉刷新,首先要实现水波纹的效果,通过解压慕课网的客户端,发现它的实现其实也是用帧动画,就是假的水波纹

【转】google推出的SwipeRefreshLayout下拉刷新用法

SwipeRefreshLayout是Google在support v4 19.1版本的library更新的一个下拉刷新组件,实现刷新效果更方便. 使用如下: 1.先下载android-support-v4.jar最新版本,之前的版本是没有SwipeRefreshLayout下拉刷新控件的,如果已经更新,此步骤可省略. 2.在xml文件中引用android.support.v4.widget.SwipeRefreshLayout控件,在里面可以放置任何一个控件,例如ListView,gridvi