mui.pullToRefresh插件

mui.pullToRefresh插件

因为自己在做一个mui项目，综合网上大家的一些方法，给自己做一个笔记，如有错误，欢迎指出

1.依赖

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

2.配置信息

 

 1 mui.each(document.querySelectorAll('.mui-scroll'), function(index, element) {
 2       mui(element).pullToRefresh({
 3       　　down: {
 4            　　style:'circle',
 5            　　contentdown : "下拉可以刷新",//可以下拉提示信息
 6            　　contentover : "释放立即刷新",//下拉结束显示
 7            　　contentrefresh : "正在刷新...",//下拉中显示
 8            　　callback: pulldownRefresh //下拉回调函数
 9       　　},
10       　　up: {
11           　　callback: function(){}, //上拉回调，必填；  
12           　　auto: false, //自动执行一次上拉加载，可选；  
13           　　show: true, //显示底部上拉加载提示信息，可选；  
14           　　contentinit: '上拉显示更多', //可以上拉提示信息  
15           　　contentdown: '上拉显示更多', //上拉结束提示信息  
16           　　contentrefresh: '正在加载...', //上拉进行中提示信息  
17           　　contentnomore: '没有更多数据了' //上拉无更多信息时提示信息 
18        }
19      });
20 });

 

3.常用API

（1）手动触发上拉/下拉

1 pullToRefresh.pullDownLoading();  //下拉
2 pullToRefresh.pullUpLoading(); //上拉

（2）结束上拉/下拉

1 pullToRefresh.endPullDownToRefresh(Boolean);  //结束下拉，传true代表无更多信息，禁止下拉，默认不传
2 pullToRefresh.endPullUpToRefresh(Boolean); //结束上拉，传true代表无更多信息，禁止上拉，默认不传

（3）禁用/开启组件

1 pullToRefresh.setStopped(Boolean);

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

1 pullToRefresh.refresh(true);

4.参考文章

http://ask.dcloud.net.cn/article/1215

 

posted @ 2019-03-08 17:53  lhjfly  阅读(3119)  评论(0)  编辑  收藏  举报