空下来把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. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

  2. Sign on Fence（连续的长为W的一段中最小的数字的最大值）

    题目链接:http://codeforces.com/problemset/problem/484/E 题意:给你个n,n个木板都有高度,宽度都为1 ,给你两个数[l,r]和一个w,求在[l,r]区间 ...

  3. [CSP-S模拟测试]:星际旅行（欧拉路）

    题目传送门(内部题4) 输入格式 第一行两个整数$n,m$,表示行星和虫洞的数量.接下来$m$行,每行两个整数$u,v$,表示存在一个双向虫洞直接连接$u$和$v$.每一个虫洞最多会被描述一次. 输出 ...

  4. IDEA设置Ctrl+滚轮调整字体大小

    IDEA设置Ctrl+滚轮调整字体大小(转载)   按Ctrl+Shift+A,出现搜索框 输入mouse: 点击打开这个设置:勾选 点击ok,之后就可以通过Ctrl+滚轮 调整字体大小了.

  5. Spring整合Hibernate实现Spring Data JPA （介绍和使用）

    Spring Data JPA是Spring基于Hibernate开发的一个JPA框架.如果用过Hibernate或者MyBatis的话,就会知道对象关系映射(ORM)框架有多么方便. 但是Sprin ...

  6. jQuery easing动画效果扩展

    引入Easing js文件 <script src="js/jquery.min.js"></script> <script src="js ...

  7. 阶段1 语言基础+高级_1-3-Java语言高级_07-网络编程_第3节 综合案例_文件上传_5_综合案例_文件上传案例优化

    自定义文件命名 文件名称被写死了 服务器上传了一张图片,服务器就停止了 把服务器端的代码放在while循环里面 服务器也不用 关闭了. 上传完成后服务器端没有关闭 再来启动客户端,又上传一张投片. 多 ...

  8. nginx proxy_pass 和 proxy_redirect

    proxy_pass:充当代理服务器,转发请求proxy_redirect:修改301或者302转发过程中的Location.默认值为proxy_redirect default. 例:locatio ...

  9. 封装redis（set/get/delete）str和哈希类型

    将Redis的常用操作封装了一下: import redis class MyRedis(): def __init__(self,ip,passwd,port=6379,db=0): #构造函数 t ...

  10. Swiper轮播隐藏再显示后不动

    公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...