空下来把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. react native 实现TODO APP

    前端有一个todo app非常适合入门练手 react-native 实现todo app:https://github.com/nwgdegitHub/TODO_RN.git

  2. CentOS7下修改默认网卡名为eth0的两种方法

    前言 大家都知道CentOS7默认的网卡名称是和设备名称是随机的,如果要修改网卡名称以 eth 开头,有两种方式,如下: 第一种方式 这种方式适合在安装操作系统的时候进行设置, 点击 Tab,打开ke ...

  3. A标签跳转链接并修改样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 小波神经网络（WNN）

    人工神经网络(ANN) 是对人脑若干基本特性通过数学方法进行的抽象和模拟,是一种模仿人脑结构及其功能的非线性信息处理系统. 具有较强的非线性逼近功能和自学习.自适应.并行处理的特点,具有良好的容错能力 ...

  5. android 任务栈及启动模式

    1.一个应用程序一般都是由多个activity组成的.2.任务栈(task stack)(别名back stack后退栈) 记录存放用户开启的activity的.3.一个应用程序一被开启系统就给他分配 ...

  6. 使用maven如何生成源代码的jar包

    http://hw1287789687.iteye.com/blog/1943157 Maven build...

  7. 快速获取批量处理Docker镜像SQL语句

    .获取批量pull语句 select concat('docker pull develop-harbor.geostar.com.cn/', t.name, ':', t1.tag) name fr ...

  8. Oracle Flashback Database

    Oracle Flashback Database Ensure that the prerequisites described in Prerequisites of Flashback Data ...

  9. P1439 【模板】最长公共子序列（LCS）

    先来看一看普通的最长公共子序列 给定字符串A和B,求他们的最长公共子序列 DP做法: 设f[i][j]表示A[1~i]和B[1~j]的最长公共子序列的长度 那么f[i][j]=max(f[i-1][j ...

  10. P3373线段树2

    #include<bits/stdc++.h> using namespace std; typedef long long ll; ; ll sum[N<<],lazy1[N ...