空下来把mui上拉加载更多，下拉刷新数据做了一个简单的实现，希望可以帮助到需要的朋友

demo项目的结构

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>mui上拉刷新下拉加载demo--封装</title>

    <script src="js/mui.min.js"></script>

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

    <style type="text/css">

    li{

        height: 30px;

    line-height: 30px;

        font-size: 14px;

        color: #bbb;

        text-indent: 4%;

        border-bottom: 1px solid currentColor;

    }

    </style>

</head>

<body>

    <!--下拉刷新容器-->

    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">

      <div class="mui-scroll">

        <!--数据列表-->

        <ul class="mui-table-view mui-table-view-chevron" id="list">

        </ul>

      </div>

    </div>

</body>

<script type="text/javascript" charset="utf-8">

   var pager = {};//分页

   var totalPage;//总页码

   pullRefresh(pager);//启用上拉下拉

   function pullRefresh(){

      mui("#refreshContainer").pullRefresh({

        up:{

           contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容

               contentnomore:'没 有 更 多 数 据 了',//可选，请求完毕若没有更多数据时显示的提醒内容；

           callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

                 window.setTimeout(function(){

             getData(pager);

             },500);

           }

         },

         down : {

             height:50,//可选,默认50.触发下拉刷新拖动距离,

             auto: true,//可选,默认false.首次加载自动下拉刷新一次

             contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容

             contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容

             contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容

             callback :function(){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

                window.setTimeout(function(){

                    pager['size']= 3;//条数

                pager['page'] = 1;//页码

                //刷新要先清空父节点里面的子节点

                var f = document.getElementById("list");

                var childs = f.childNodes;

                for(var i = childs.length - 1; i >= 0; i--) {

                  f.removeChild(childs[i]);

                }

                getData(pager);

                },500);

              }

            }

        })

    }

   //这个方法是负责向接口请求数据的，你可以选择你喜欢的方式，我这里是直接用的mui.ajax

    function getData(params){

        mui.ajax("/article/getArticlePage",{

          data:{

            "header":{"os":"wap","app":"xxxx","ver":1.0},

            "data":params

          },

          dataType:'json',

          type:'post',

          headers:{'Content-Type':'application/json'},

          success:function(data){

                  mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);

              //下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定

              var returnData = data.data;

              var element=document.getElementById("list");

              var para;

         　　　var node;

              for(var i = 0; i<returnData.length;i++){

                para = document.createElement("li");

                node = document.createTextNode(returnData[i].article_title)

                para.appendChild(node);

                element.appendChild(para);

              }

        　　　　//这里很重要，这里获取页码 公式：总条数/每页显示条数 （这里的处理是根据接口返回数据来做的处理 最下面有接口返回数据的格式）

              totalPage = data.ext%pager.size!=0?parseInt(data.ext/pager.size)+1:data.ext/pager.size;

              if(totalPage==pager.page){//总页码等于当前页码，停止上拉下拉

             mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);

              }else{

            pager.page++;

            mui('#refreshContainer').pullRefresh().refresh(true);

              }

            },

            error:function(xhr,type,errorThrown){

            //异常处理；

            console.log(type);

            }

         })

        }  

</script>

</html>

直接贴代码了

index.html

mui上拉刷新下拉加载都这里了，两个方法搞定

代码就贴完了 就是看起来不是很好看

下面是效果图，想弄视频上来的 然后发现太鸡肋了 弄不上来  气死我了

MUI 上拉下拉双webview模式

接口返回数据格式

ext---总条数

data---返回数据

mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉的更多相关文章

  1. google官方的下拉刷新+自定义上拉加载更多

    转载请标注转载:http://blog.csdn.net/oqihaogongyuan/article/details/50949118 google官方的下拉刷新+自定义上拉加载更多 现在很多app ...

  2. Android如何定制一个下拉刷新，上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  3. react-native 模仿原生 实现下拉刷新/上拉加载更多（RefreshListView）

    1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...

  4. iOS-tableView上拉加载更多后，界面出现偏移

    问题描述: 在做tableview的界面展示的时候,cell用自动计算高度的.但是在上拉加载更多的时候,数据请求完后,刷新界面,界面的顶部就出现了偏移 分析: 查阅资料后发现,当tableView的c ...

  5. mui的上拉加载更多 下拉刷新 自己封装的demo

    ----------------------------------------------- 这是一个非常呆萌的程序妹子,深夜码的丑代码------------------------------- ...

  6. react-native-page-listview使用方法(自定义FlatList/ListView下拉刷新,上拉加载更多,方便的实现分页)

    react-native-page-listview 对ListView/FlatList的封装,可以很方便的分页加载网络数据,还支持自定义下拉刷新View和上拉加载更多的View.兼容高版本Flat ...

  7. H5基于iScroll实现下拉刷新，上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

  8. 常见开发需求之angular上拉加载更多

    需求   移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...

  9. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

随机推荐

  1. 内核热patch

    如下代码是一个内核patch #include <linux/init.h> #include <linux/module.h> #include <linux/modu ...

  2. php end()函数 语法

    php end()函数 语法 作用:将数组内部指针指向最后一个元素,并返回该元素的值(如果成功).博智达 语法:end(array) 参数: 参数 描述 array 必需.规定要使用的数组. 说明:如 ...

  3. ASP.net 能写一个上传整个文件夹的东东(msdn)

    IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交下载请求时,服务 ...

  4. pandas中的describe方法

  5. BFC、IFC、GFC和FFC

    基本概念 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不 ...

  6. input 的 type 等于 file

    高版本浏览器由安全问题没法获得文件的绝对路径, 因此使用浏览器自制播放器只能使用其他的手段实现. 使用相对路径, 把浏览器与文件放在同一路径下即可使用.通用性受到限制.

  7. Wowza 4.5 修改 manager 端口号

    //编辑下面的文件, 搜索8088 有两处,改为想要的端口号即可 vim /usr/local/WowzaStreamingEngine/manager/bin/startmgr.sh // 重启服务 ...

  8. First-order logic

    w https://en.wikipedia.org/wiki/First-order_logic

  9. php对bom的处理

    通常只有在windows的notepad中 , 创建文本文件, 保存为UTF-8 时, 它会自动添加3个字节: ef bb bf. 用editplus来看txt文件就可以看得很清楚. 但是, 只有wi ...

  10. SpringBoot 集成mongodb（1）单数据源配置

    新项目要用到mongodb,于是在个人电脑上的虚拟环境linux上安装了下mongodb,练习熟悉下. 1.虚拟机上启动mongodb. 首先查看虚拟机ip地址,忘了哈~~ 命令行>ifconf ...