关于mui上拉加载遇到的一些问题

每次开发总是会遇到一些相似的问题,每次遇到总是要查阅好多资料,费时又费力。

好记性不如烂笔头,记录下来保存到磁盘中吧,可是每次总是在如山的资料中反照效率也是不高。还是博客记录查阅更方便些。好了废话不多说开始今天的问题记录吧!

在开发app的过程中,使用的mui是一个不错的框架,其中上拉加载也是一个使用率比较高的。上拉加载分为单页上拉加载和tab页上拉加载,其中单页的上拉加载还好说,tab页的问题就比较多了,尤其是在停用上拉加载然后在启用的时候,下面分别来说一下单页和tab页上拉加载的初始化以及重启上拉加载。

1.单页模式

  1.1.上拉加载初始化:通过mui.init方法中pullRefresh参数配置上拉加载各项参数,如下

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

  1.2.结束上拉加载

  当全部数据加载完之后就需要结束上拉加载(总不能一致加载数据吧),该怎么操作呢,其实很简单只需要在回调函数 pullfresh-function 中调用 endPullupToRefresh() 即可,如下:

function pullfresh-function() {
     //业务逻辑代码,比如通过ajax从服务器获取新数据;
     ......
     //注意:
     //1、加载完新数据后,必须执行如下代码,true表示没有更多数据了:
     //2、若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
     this.endPullupToRefresh(true|false);
}

    这个方法有一个参数为布尔类型,不写默认是false,其作用是:若还有更多数据,则传入false; 否则传入true,之后滚动条滚动到底时,将不再显示“上拉显示更多”的提示语,而显示“没有更多数据了”的提示语;

 1.3.重置上拉加载

  若部分业务中,有重新触发上拉加载的需求(比如当前类别已无更多数据,但切换到另外一个类别后,应支持继续上拉加载),此时调用.refresh(true)方法,可重置上拉加载控件,如下代码:

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
//注意:refresh()中需传入true
mui(‘#pullup-container‘).pullRefresh().refresh(true);

这里需要注意:因初始化时使用的时 mui.init({pullRefresh:{}}),所以这里重置上拉加载时也需要 pullRefresh().refresh(true)

2.tab页模式

 一般mui开发tab页使用最多的时slider组件(既可以用于tab页也可做图片轮播,功能还是比较优秀的)。当多个tab页都需要开启上拉加载时使用方式1进行初始化就有点不切实际了,那该怎么弄呢,请看一下文字

 2.1.初始化上拉加载

mui.each(document.querySelectorAll(‘.mui-scroll‘), function(i, item) {
                mui(item).pullToRefresh({
                    up: {
                        height:50,//可选.默认50.触发上拉加载拖动距离
                        auto:true,//可选,默认false.自动上拉加载一次
                        contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
                        contentnomore: ‘没有更多数据了‘,//可选,请求完毕若没有更多数据时显示的提醒内容;
                        callback: function() {
                            var self = this
                            setTimeout(function() { // 加个延时,会显示 正在加载...
                                loadData(item) // 自己的业务逻辑
                                self.endPullUpToRefresh(); // 要执行一下,会在最下面显示 上拉加载更多
                            }, 500)
                        }
                    }
                })
            })

  会有人说这不和方式一的初始化差不多嘛,确实,但是也是最容易出问题的,请看这里初始化使用的是 mui().pullToRefresh(),而方式一使用的是 mui.init({pullRefresh:{}})。这里先卖个关子,咱们继续往下看

 2.2.结束上拉加载

  其实和方式一的相类似,也是在回调函数中调用 endPullupToRefresh(),但是调用方式有所不同,请看:

function loadData(ele) {
    // ele为启用上拉加载的滚动区域的html元素
     //业务逻辑代码,比如通过ajax从服务器获取新数据;
     ......
     //注意:
     //1、加载完新数据后,必须执行如下代码,true表示没有更多数据了:
     //2、若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
     mui(ele).pullToRefresh().endPullupToRefresh(true|false);
}

 2.3.重置上拉加载

  同理也和方式一相类似,但是调用方式不同:

// pullup-container为使用mui(item).pullToRefresh()初始化时item所对应的html元素选择器,需要重置哪个就写哪个的;
// 注意:这里使用的是 pullToRefresh()。refresh()中需传入true
mui(‘#pullup-container‘).pullToRefresh().refresh(true);

 

通过以上,想必大家也有所发现了,单页模式使用的是 pullRefresh,所以结束和重置上拉加载时都需要 pullRefresh() 来分别调用;而tab页模式下使用的是 pullToRefresh() 初始化的,所以呦结束和重置时就需要 pullToRefresh() 来分别调用。

当然,下拉刷新也是同理,由于此次本人暂未使用到,就留待大家开发研究了!

最后,要想使用上拉加载有些代码还是必不可少的:

mui(‘.mui-scroll-wrapper‘).scroll({
    bounce: true, // 是否启用回弹
    indicators: true, //是否显示滚动条
    deceleration: 0.0006 //阻尼系数,系数越小滑动越灵敏,默认0.0006
});

页面都滚动不起来如何进行上拉加载呢!!!

每天进步一点点,点滴记录,积少成多。

以此做个记录,

如有不足之处还望多多留言指教!

关于mui上拉加载遇到的一些问题

上一篇:ES6 中的 Symbol 是什么?


下一篇:线段树板子(单点和区间的查询+修改)