Trust
Trust
  • 发布:2017-03-09 16:20
  • 更新:2019-03-06 10:13
  • 阅读:27270

【文档】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

6 关注 分享
lhyh 走走江南 MooGu 卡农 o土豆o 1336955219@qq.com

要回复文章请先登录注册

emhost@163.com

emhost@163.com

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

爱心蜀黍

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

154686378@qq.com

回复 爱心蜀黍:
解决了没?
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
703035179@qq.com

703035179@qq.com

setStopped(true)后,还可以下拉刷新,什么情况?
2017-08-25 19:58
avg_z@163.com

avg_z@163.com

回复 光光阿斯蒂芬:
请问你解决了嘛
2017-06-27 18:13
Sen

Sen

上拉禁用不了 只能禁用下拉
2017-05-02 15:00
379288498@qq.com

379288498@qq.com

使用这个组件,在android部分机子中,列表的tap事件不灵敏,感觉是下拉这个组件在点击列表的时候有抖动造成的,同样的列表把下拉去除,tap事件正常
2017-04-06 13:39
wen如故i

wen如故i

在左右拖动的过程中,过度还没有结束,突然下滑,触发下拉刷新。--》怎么禁止下拉圈圈,或者下滑不出发圈圈?
2017-04-01 15:12
wen如故i

wen如故i

怎么隐藏 ‘没有更多数据了’?隐藏之后,怎么再次显示 ‘上拉加载更多’
2017-04-01 09:35
1297640072@qq.com

1297640072@qq.com

回复 Trust:
确实是选择器不正确,非常感谢!
2017-03-12 17:14
Trust

Trust (作者)

回复 1297640072@qq.com:
测试没有问题,scorllTo方法调用正常。检查是不是自己的选择器不正确,正确的选择器应该是.mui-scroll-wrapper。
2017-03-12 15:38
1297640072@qq.com

1297640072@qq.com

回复 Trust:
使用的是上面说的pullToRefresh插件,无法调用scroll组件的scrollTo,试过用transform可以滑到顶部,但是当我继续点击滑动列表时,又会回到上次滑到的位置,而不是从头部开始滑动
2017-03-12 14:54
Trust

Trust (作者)

回复 1297640072@qq.com:
如果使用了mui的scroll组件,参考相关文档。http://dev.dcloud.net.cn/mui/ui/
2017-03-12 12:21
1297640072@qq.com

1297640072@qq.com

这个组件怎么滑到顶部
2017-03-11 21:10
光光阿斯蒂芬

光光阿斯蒂芬

回复 Trust:
这个能用在真机运行上么
2017-03-10 15:59
Trust

Trust (作者)

回复 光光阿斯蒂芬:
没有报错啊。。。直接下载例子就可以了,你是不是改什么东西了。
2017-03-10 12:03
光光阿斯蒂芬

光光阿斯蒂芬

试了下,会初夏一下 错误信息:
Uncaught TypeError: Cannot read property 'classList' of undefined at js/mui.pullToRefresh.js:346
2017-03-10 10:33
lhyh

lhyh

好久没看到新东西了
2017-03-10 10:00