mui的下拉刷新和上拉加载

代码定义:

var refresh = function(){    mui.init({        pullRefresh : {            container:‘#refreshContainer‘,//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等            down : {                height:50,//可选,默认50.触发下拉刷新拖动距离,                auto: false,//可选,默认false.自动下拉刷新一次                contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容                contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容                contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容                callback : function() { //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据                  /*             ...                    clock_data.content();            */                    mui(‘#refreshContainer‘).pullRefresh().refresh(true);                    mui(‘#refreshContainer‘).pullRefresh().endPulldownToRefresh();                }            },            up : {                height:50,//可选.默认50.触发上拉加载拖动距离                auto:false,//可选,默认false.自动上拉加载一次                contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容                //contentnomore:‘没有更多数据了‘,//可选,请求完毕若没有更多数据时显示的提醒内容;                callback : function(){  //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;                    /*...*/                    mui(‘#refreshContainer‘).pullRefresh().refresh(true);                    mui(‘#refreshContainer‘).pullRefresh().endPullupToRefresh();                }            }        }    });}

//执行
refresh ();

1、下拉刷新

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 :function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
    }
  }
});

刷新比较简单,在一个页面中的不同类目之间,在上拉之后到另一个类目时,可以执行
mui(‘#pullrefresh‘).pullRefresh().scrollTo(0,0,0)使滚动列表跳到顶部。

2、上拉加载
mui.init({
  pullRefresh : {
    container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
    up : {
      height:50,//可选.默认50.触发上拉加载拖动距离
      auto:true,//可选,默认false.自动上拉加载一次
      contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
      contentnomore:‘没有更多数据了‘,//可选,请求完毕若没有更多数据时显示的提醒内容;
      callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
    }
  }
});

(1)加载完新数据后,是否还有更多数据;若还有更多数据,则传入false; 否则传入true,之后滚动条滚动到底时,将不再显示“上拉显示更多”的提示语,而显示“没有更多数据了”的提示语。
    mui(‘#refreshContainer‘).pullRefresh().endPullupToRefresh(false);
(2)在一个页面的不同类目之间切换时,特别是在经过上拉加载之后,重置加载尤为重要,否则可能将出现上拉不动的bug:
    mui(‘#refreshContainer‘).pullRefresh().refresh(true);
 

补充:1.禁用上拉加载:mui(‘#refreshContainer‘).pullRefresh().disablePullupToRefresh();2.启用上拉加载:mui(‘#refreshContainer‘).pullRefresh().enablePullupToRefresh();

原文地址:https://www.cnblogs.com/bber/p/9715537.html

时间: 2024-10-02 15:28:29

mui的下拉刷新和上拉加载的相关文章

支持下拉刷新和上划加载更多的自定义RecyclerView(仿XListView效果)

首先看效果 下拉刷新:        上划加载        在项目更新的过程中,遇到了一个将XListView换成recyclerView的需求,而且更换完之后大体效果不能变,但是对于下拉刷新这样的效果,谷歌给出的解决方案是把RecyclerView放在一个SwipeRefreshLayout中,但是这样其实是拉下一个小圆形控件实现的,和XListView的header效果不同.在网上找了很多的别人代码,都没有实现我想要的效果,于是自己动手写了一个. 具体实现的效果有以下几条 下拉刷新功能:

最新Android ListView 下拉刷新 上滑加载

开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,之前大家最常用的应该是pull to refresh或它的变种版吧,google官方在最新的android.support.v4包中增加了一个新类SwipeRefreshLayout,地址 这个类的作用就是提供官方的下拉刷新,并且效果相当不错,而上拉加载更多则用我们自定义的listview,也是相当简单. 下拉刷新 简单的介绍下: 首先它是一个viewgroup,但是它只允许有一个子控件,子控件能是任何view,使用的时候,所在

mui 框架中结合mui.ajax实现 下拉刷新和上拉加载功能

实现方式与之前写的jquery weui 下拉刷新和上拉加载功能有点相似,以下是实现过程! 后台返回的数据格式: 页面代码布局: <header id="header" class="mui-bar mui-bar-nav"> <h1 class="mui-title">订单列表</h1> <a class="mui-icon mui-pull-right iconfont icon-tuich

使用PullToRefresh实现下拉刷新和上拉加载

使用PullToRefresh实现下拉刷新和上拉加载 分类: Android2013-12-20 15:51 78158人阅读 评论(91) 收藏 举报 Android下拉刷新上拉加载PullToRefresh PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的View类型,而且使用起来也十分方便. (下载地址:https://github.com/ch

IOS 开发下拉刷新和上拉加载更多

IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh (4)MJRefresh (5)自己实现 2.AH3DPullRefresh实现下拉刷新和上拉下载的步骤 添加UIScrollView+AH3DPullRefresh.h 和UIScrollView+AH3DPullRefresh.m两个文件,由此可知,它是基于UIScrollView的方法. 在bu

iOS学习之路--下拉刷新和上拉加载更多

iOS学习之路--下拉刷新和上拉加载更多 简介 本文中笔者将和大家分享应用app中常用到的表单内容的下拉刷新和上拉加载更多的功能实现的方法. 内容 1.有哪些实现方法与各方法的优劣 使用过美团,大众点评的朋友们应该有注意到,当你向上滑动表单的时候会有更多的店铺加载进你的表单中,而当你下滑表单顶的时候,则会刷新表单的内容并从网络上获取最新的信息.通过下拉刷新和上拉加载更多的功能,使app可以获取更多用户想要的信息和获取最新的信息.那么这种功能如何实现呢,还请跟着笔者继续往下看. 目前来说,主要的实

Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)

PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的View类型,而且使用起来也十分方便. (下载地址:https://github.com/chrisbanes/Android-PullToRefresh) 下载完成,将它导入到eclipse中,作为一个library导入到你的工程中就好了. 一.废话少说,下拉刷新Go. 1.在你的布局文件中加上你想用的

【好程序员笔记分享】——下拉刷新和上拉加载更多

-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ iOS学习之路--下拉刷新和上拉加载更多 简介 本文中笔者将和大家分享应用app中常用到的表单内容的下拉刷新和上拉加载更多的功能实现的方法. 内容 1.有哪些实现方法与各方法的优劣 使用过美团,大众点评的朋友们应该有注意到,当你向上滑动表单的时候会有更多的店铺加载进你的表单中,而当你下滑表单顶的时候,则会刷新表单的内容 并从网络上获取最新的信息.通过下拉刷新和上拉加载更多的功能,使app可以获取更多用户想要

下拉刷新和上拉加载的原理

很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来. @下面是关键代码分析: // 下拉刷新的原理 - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scro

不借助第三方插件利用ScrollView自身delegate实现下拉刷新和上拉加载

下拉刷新功能基本上在所有的app中都会被用到,而且这个功能已经被apple集成进去了,不过必须得是在tableViewController中才有,是一个叫做UIRefreshControl的控件,想看效果可以看手机QQ上面联系人列表下拉后的刷新.这里不多介绍. 本篇blog主要介绍如何在scrollview中实现下拉刷新的效果.因为有些时候我们可能更多地希望直接在scrollview中展现,而不是一定要局限于tableviewcontroller. 当然网上有很多下拉刷新和上拉加载的第三方控件,