美文网首页
MUI实现上拉刷新

MUI实现上拉刷新

作者: 不去解释 | 来源:发表于2017-07-06 22:30 被阅读0次

MUI-最接近原生APP体验的高性能前端框架

1.mui的上拉加载和下拉刷新类似,都属于pullRefresh插件,使用过程如下:

  • 1、页面滚动到底,显示“正在加载...”提示(mui框架提供)
  • 2、执行加载业务数据逻辑(开发者提供)
  • 3、加载完毕,隐藏"正在加载"提示(mui框架提供)
    开发者只需关心业务逻辑,实现加载更多数据即可

2.初始化方法类似下拉刷新,通过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从服务器获取新数据;
}
}
});

3.结束上拉加载

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

4.重置上拉加载

若部分业务中,有重新触发上拉加载的需求(比如当前类别已无更多数据,但切换到另外一个类别后,应支持继续上拉加载),此时调用.refresh(true)方法,可重置上拉加载控件,如下代码:
//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
//注意:refresh()中需传入true
mui('#pullup-container').pullRefresh().refresh(true);

5.禁用上拉刷新

在部分场景下希望禁用上拉加载,比如在列表数据过少时,不想显示“上拉显示更多”、“没有更多数据”的提示语,开发者可以通过调用disablePullupToRefresh()方法实现类似需求,代码如下:
//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
mui('#pullup-container').pullRefresh().disablePullupToRefresh();

6.启用上拉刷新

使用disablePullupToRefresh()方法禁用上拉加载后,可通过enablePullupToRefresh()方法再次启用上拉加载,代码如下:
//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
mui('#pullup-container').pullRefresh().enablePullupToRefresh();

相关文章

  • MUI实现上拉刷新

    MUI-最接近原生APP体验的高性能前端框架 1.mui的上拉加载和下拉刷新类似,都属于pullRefresh插件...

  • H5:实现下拉刷新,上拉加载效果

    因为公司项目的需求,在H5界面上也要实现与原生系统相似的"下拉刷新,上拉加载"的效果。在网上发现mui的组件库已经...

  • Android面试整理

    RecyclerView的上拉加载、下拉刷新怎么实现?RecyclerView原生实现侧滑、拖动? 上拉加载、下拉...

  • ListView 实现上拉加载

    ListView 实现下拉刷新ListView 实现上拉加载 我们先分析一下如何实现 ListView 上拉加载。...

  • ListView 实现下拉刷新

    ListView 实现下拉刷新ListView 实现上拉加载 我们先分析一下如何实现 ListView 下拉刷新。...

  • 页面上拉刷新下拉加载实现

    如何在手机端页面实现上拉刷新下拉加载的效果 今日看了一篇实现的文章上拉加载下拉刷新了解下根据文章进行一些补充 实现...

  • SwipeRefreshLayout下拉刷新控件实现上拉加载

    Android官方下拉刷新控件没有实现上拉加载,需要自己实现上拉加载 首先,先介绍一下SwipeRefreshLa...

  • mui上拉加载

    引入mui.min.js和mui.min.css 例子 如果有问题欢迎留言点赞~~~~

  • Flutter 实现上拉加载更多、下拉刷新

    参考:ListView下拉刷新与加载更多 文章目录 相关文章推荐 实现效果 实现分析下拉刷新上拉加载更多 源码 相...

  • RecyclerViewRefresh

    采用RecyclerView和SwipeRefreshLayout实现下拉刷新和上拉自动加载更多 1.下拉刷新 2...

网友评论

      本文标题:MUI实现上拉刷新

      本文链接:https://www.haomeiwen.com/subject/jupkhxtx.html