mui实现列表的下拉刷新上拉加载

最新推荐文章于 2020-04-25 15:25:45 发布

weixin_30505751

最新推荐文章于 2020-04-25 15:25:45 发布

阅读量302

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhoujl-5071/p/7978369.html

本文介绍如何利用MUI框架实现移动端应用的下拉刷新功能。包括引入MUI库文件、设置滚动容器、初始化MUI组件、定义下拉刷新回调函数等步骤，并给出具体的代码示例。

1、引入mui控件的js文件和css样式文件

<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>

2、完善列表容器：.mui-scroll-wrapper为滚动容器，.mui-scroll为滚动主体，里边内容不限。

<div id="pullrefresh" class="mui-scroll-wrapper">
    <div class="mui-scroll">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">data</li>
            <li class="mui-table-view-cell">data</li>
        </ul>
    </div>
</div>

3、初始化mui控件：初始化会生成部分mui需要用到的控件，给容器和列表绑定事件。

mui.init({ 
 pullRefresh : {
　　 swipeBack: false, //关闭左滑关闭功能
    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
    down : {
      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
      height:'50px',//可选,默认50px.下拉刷新控件的高度,
      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
      auto: true,//可选,默认false.首次加载自动上拉刷新一次
      callback :pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
   },
　　up:{
　　　　contentrefresh: '正在加载...',
　　　　contentnomore:'没有更多数据了',
　　　　callback:pulluploading //上拉加载下一页
　　}

});

4、定义下拉刷新列表方法 pulldownRefresh()

mui.ajax("请求url", {
    type: "get",
    dataType: "json",
    data:{
            param:param,
            name:name
        },
        success: function(data){
             //将获取到的数据动态赋值给列表，假设scroller为滚动容器
             //如果数据不到一页，显示“没有更多数据了”,关闭上拉功能
             //scroller.endPullupToRefresh(true);
             //scroller.querySelector(".mui-pull-bottom-pocket .mui-pull-caption").innerHTML = "没有更多数据了";
             //如果对于关闭的上拉功能，可以通过以下语句重置上拉加载功能。
             //mui('#pullrefresh').pullRefresh().refresh(true);
        }
});