提示:如有疑问可以加QQ: 2564034335 , 或者 QQ 群: 891416757
该文章或问题已被删除

APP 上拉加载,下拉刷新 介绍

开发APP时,很多时候都会用上,上拉加载数据,下拉刷新等功能,本文件介绍两种。

一种是原生APP自带的上拉加载,下拉刷新功能,一种是用JS 插件写的上拉加载,下拉刷新。

1.原生APP 的 上拉加载,下拉刷新,性能效果佳,体验好

它的使用方法,mui.js 已经把它封装起来,我们可以这样使用, down 是下拉刷新方法,up上拉加载方法

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从服务器获取新数据;
    },
     up : {
      height:50,//可选.默认50.触发上拉加载拖动距离
      auto:true,//可选,默认false.自动上拉加载一次
      contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
      contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
      callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
    }
  }
});


下拉刷新: 只有一个方法可用,当刷新完毕,执行以下代码,停止刷新,恢复到原状。

 mui('#refreshContainer').pullRefresh().endPulldown();

 上拉加载:常用4个方法

   mui('#refreshContainer').pullRefresh().disablePullupToRefresh(); //禁用上拉刷新, 

   mui('#refreshContainer').pullRefresh().enablePullupToRefresh();  //启用上拉刷新

   mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); //结束上拉加载, false 代表还有数据可加载,true 代表已经没有更多数据了。

   mui('#refreshContainer').pullRefresh().refresh(true); //重置上拉加载, 当上拉加载到没有更多数据时,已经不能上拉了,这时我们下载刷新数据时,就要重置上拉加载,才能又恢复上拉加载更多数据。

 如果想禁止下拉刷新,可以这样做

//禁止下拉刷新
plus.webview.currentWebview().setPullToRefresh({support:false});

//开启下拉刷新
plus.webview.currentWebview().setPullToRefresh({support:true,style:"circle"});

例子:可以在 MUI 项目里找到, 点击预览下拉刷新 

 

2. 是通过JS插件写的上拉加载,下拉刷新功能,性能差些,在些低端机里,可能会出现下拉转圈抖动现象。

  它的使用方法,在页面里引用这两个JS文件,这两个文件在哪里呢,在MUI项目工程包里,JS文件夹下面。

 它的优势是,可以在同一个页面,实例化多个 下拉刷新,上拉加载,可以区域刷新等等。

<script src="js/mui.pullToRefresh.js"></script>
<script src="js/mui.pullToRefresh.material.js"></script>

 基础代码

mui("#pullRefresh").pullToRefresh({
	   down:{ 
		callback:function() 
		{
                    //下拉刷新
		 }
	      },
	  up:{
	     show:false,
             contentrefresh:"加载中...",
             contentnomore:"没有更多数据了",
             callback: function() 
            {
                 //上拉加载
            });

下拉刷新:2个 方法

mui("#pullRefresh").pullToRefresh().endPullDownToRefresh(); //结束下拉刷新

mui("#pullRefresh").pullToRefresh().pullDownLoading(); //执行该方法, 就自动执行下拉刷新一次


上拉加载:2个 方法

 mui("#pullRefresh").pullToRefresh().endPullUpToRefresh(true);  //true 代表没有更多数据了,false 代表还可以继续加载更多数据

 mui("#pullRefresh").pullToRefresh().refresh(true); //重置上拉加载, 当重新下拉刷新数据时,就要重新重置下,才可继续上拉加载更多数据
 

例子:可以在 MUI 项目里找到 "选项卡+下拉刷新"

点赞 1      收藏 0

0 个评论

正在加载...

这里空空如也,快来补一刀!

加载更多

回答问题或评论文章请先 或者 注册