Trust
Trust
  • 发布:2017-03-09 16:20
  • 更新:2019-11-19 13:57
  • 阅读:29979

【文档】mui.pullToRefresh插件

分类:MUI

下拉刷新和上拉加载,是大部分应用中都会用到的功能。
mui结合html5plus的API,封装了一套可以在Android和iOS上实现的配置,详细参考mui相关文档

为了方便开发wap站的开发者,mui还扩展了pullToRefresh插件。

依赖

  • mui.js
  • mui.pullToRefresh.js
  • mui.pullToRefresh.material.js

同样,和其它一些插件一样,在HBuilder中新建hello mui示例工程,或在在github上均可获取以上资源。

初始化组件

初始化方法

var pullToRefresh = mui(selector).pullToRefresh(options);  

配置信息

下拉配置

down: {  
    callback: function(){} //下拉回调函数  
}  

目前下拉只有这一个配置项,下拉的动画是canvas绘制的,想调整的话需要修改mui.pullToRefresh.material.js中的相关代码。

上拉配置

up: {  
    callback: function(){}, //上拉回调,必填;  
    auto: false, //自动执行一次上拉加载,可选;  
    show: true, //显示底部上拉加载提示信息,可选;  
    contentinit: '上拉显示更多', //可以上拉提示信息  
    contentdown: '上拉显示更多', //上拉结束提示信息  
    contentrefresh: '正在加载...', //上拉进行中提示信息  
    contentnomore: '没有更多数据了' //上拉无更多信息时提示信息  
}  

常用API

下拉相关

手动触发下拉

pullToRefresh.pullDownLoading();  

结束下拉

pullToRefresh.endPullDownToRefresh();  

上拉相关

手动触发上拉

pullToRefresh.pullUpLoading();  

结束上拉

pullToRefresh.endPullUpToRefresh(Boolean); //传true代表无更多信息,默认可不传;  

禁用/开启组件

pullToRefresh.setStopped(Boolean);  

刷新组件

上拉的操作,如果无更多信息后,调用结束上拉并且传true会禁用上拉。如果需要重新开启上拉,则需要刷新组件。

pullToRefresh.refresh(true);  

结尾

附件中提供了一个简单的,使用mui.pullToRefresh制作的例子。多个选项卡的情景,请参考hello mui示例中的pullrefresh_with_tab.html

7 关注 分享
lhyh 走走江南 MooGu 卡农 o土豆o 1336955219@qq.com 海阔天空_94

要回复文章请先登录注册

764430114@qq.com

764430114@qq.com

上拉显示更多显示在列表信息的最上面,这是啥情况呀
2019-11-19 13:57
emhost@163.com

emhost@163.com

如果在列表外部下拉的话,圆圈不出来,官网demo也有这个问题,怎么解决?谁知道回一下,谢谢
2019-03-06 10:13
爱心蜀黍

爱心蜀黍

回复 浪里寻花 :
ios还是存在这个问题。现在临时禁止下拉刷新的妥协办法是:监听scroll的y值,小于0或者大于整个页面长度时调用 .pullRefresh().setStopped(true);大于0,小于整个长度时调用.pullRefresh().setStopped(false);
2018-06-22 00:58
浪里寻花

浪里寻花

回复 爱心蜀黍 :
解决了没?
2018-06-11 18:13
爱心蜀黍

爱心蜀黍

回复 Trust :
你好 ios 使用 .pullRefresh().setStopped(true) 后 整个页面都没法拖动了,请问有什么办法吗
2018-01-24 16:48
1083868075@qq.com

1083868075@qq.com

回复 703035179@qq.com :
你是在手机模拟端试的吧,问题解决了吗?我的也是禁用不了下拉刷新。
2017-11-01 21:49
1083868075@qq.com

1083868075@qq.com

回复 Sen :
下拉禁用不了怎么回事呢? 这是我的测试代码,浏览器上可以禁用,手机模拟端禁用不了,不起作用
pullRefresh: {
container: '#pullrefresh',
down: {
auto:true,
style:'circle',
callback: function(){
setTimeout(function() {
console.log("test");
clistDom.innerHTML="";
dl.load({"pageNum":1,"pageSize":2});
$('#pullrefresh').pullRefresh().endPulldown();
mui('#pullrefresh').pullRefresh().setStopped(true); //暂时禁止滚动
$.toast("重新刷新了页面");
}, 1500);
}
}
}
2017-11-01 21:48
archer.lzy@foxmail.com

archer.lzy@foxmail.com

列表中如果一条数据都没有,下拉刷新就没办法触发,这算bug吗?
2017-10-25 08:45
Damon4iOS

Damon4iOS

.mui-pull-top-tips
.mui-bar~.mui-pull-top-tips
相关的css,哪里可以看文档?这些css是怎么体现出来的?
2017-10-13 10:45
崔先生

崔先生

mui.pullToRefresh.material.js 调整下拉刷新开始位置, 怎么调整啊?我在里面改的怎么都没有反应?有大牛告诉我下么?
2017-09-28 15:06