空下来把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. 链接收藏：bullet物理引擎不完全指南

    这个也是博客园的文章,编辑得也很好,就不copy了,结尾还有PDF: https://www.cnblogs.com/skyofbitbit/p/4128347.html 完结

  2. centos搭建lamp环境参考（根据腾讯云实验室）

    1.安装MYSQL 使用 yum 安装 MySQL: yum install mysql-server -y 安装完成后,启动 MySQL 服务: service mysqld restart 设置 ...

  3. Java语言基础(方法重载概述和基本使用)

    方法重载概述: 在同一个类中,允许存在一个以上的同名方法,只要他们的参数列表不同(即参数类型或者参数个数)即可. 方法重载特点: 1. 与返回值类型无关,只看方法名和参数列表 2. 在调用的时候,虚拟 ...

  4. 2017乌鲁木齐网络赛 J题 Our Journey of Dalian Ends ( 最小费用最大流 )

    题目链接 题意 : 给出一副图,大连是起点,终点是西安,要求你求出从起点到终点且经过中转点上海的最小花费是多少? 分析 : 最短路是最小费用最大流的一个特例,所以有些包含中转限制或者经过点次数有限制的 ...

  5. css基础—字体那些事

    css基础-字体那些事 1. 首先讲字的大小样式等 字体大小 font-size: 40px; 文字字体 font-family: "宋体",Arial; 文字样式 font-st ...

  6. WinForm实现最小化右下角

    首先,要在窗体里面加入这么两个控件,左边的是托盘控件,右边的是菜单控件. 然后设置窗体的FormClosing事件: if (e.CloseReason == CloseReason.UserClos ...

  7. deepin 安装tar.gz

    由于网上推荐的比较多的安装方式是:sudo apt-get install mysql-server mysql-client,这个安装的是mysql5.7,既然都安装了就要安装最新的,所以从官网下载 ...

  8. free pascal

    https://freepascal.org/ free pascal OPEN SOURCE COMPILER FOR PASCAL AND OBJECT PASCAL GENERAL HomeNe ...

  9. 类File

    * File类常用的构造方法: * (1)File(String s);//由s确定File对象的文件名 * (2)File(String directory,String s);//由directo ...

  10. 06 使用bbed修复delete的数据--01

    06 使用bbed修复delete的数据--01 根据rowid查看数据文件和block号 SYS@ orcl ; ROWID ID NAME FILE# BLOCK# --------------- ...