空下来把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. SSM图片

    非关系型数据,redis,mongoDB关系型数据,mysql,oracle 1.springmvc+spring+mybatis1.导入jar2.书写配置xml(applicationContext ...

  2. PHP入门培训教程　一个漂亮的PHP验证码

    如何写一个漂亮的PHP验证码?兄弟连PHP培训 小编分享一段代码给大家: <?php class Imagecode{ private $width ; private $height; pri ...

  3. 区间查询异或最大值——cf1100F,hdu6579

    cf1100F是静态区间查询最大值,有离线的解法,我感觉线段树或者莫队应该都能过 更优秀的解法可以在线并支持修改,可以解决hdu6579,即依次插入每个数,pos[i][j]表示在插第i个数时第j个基 ...

  4. HTTP入门（二）：用Chrome开发者工具查看 HTTP 请求与响应

    HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应 本文简单总结HTTP的请求与响应. 本文主要目的是对学习内容进行总结以及方便日后查阅. 详细教程和原理可以参考HTTP文档(MD ...

  5. （转）CBC模式和ECB模式解读

    一 什么是CBC模式 CBC模式的全称是Cipher Block Chaining模式(密文分组链接模式),之所以叫这个名字,是因为密文分组像链条一样相互连接在一起. 在CBC模式中,首先将明文分组与 ...

  6. VS Project Property Manage

    概念:Project Property 和 Property Sheet. Project Property:项目属性,是你当前项目的属性配制,保存在你工程的配制文件中,rojectName.vcxp ...

  7. ASP Loading

    ASP 页面加载等待效果.如 显示"请稍后页面正在加载...",加载完成后隐藏这个loading. <%Response.buffer=false%> <html ...

  8. day48—JavaScript键盘事件

    转行学开发,代码100天——2018-05-03 今天继续学习JavaScript事件基础之键盘事件. 键盘代号获取 keyCode 键盘事件:onkeydown onkeyup 如通过键盘上下左右按 ...

  9. AWK之随心所欲-基础篇

    一.简介 awk 是一个处理文本的编程语言工具,能用简短的程序处理标准输入或文件.数据排序.计算以及 生成报表等等. 在 Linux 系统下默认 awk 是 gawk,它是 awk 的 GNU 版本. ...

  10. set_index()与reset_index()函数

    一 set_index()函数 1 主要是理解drop和append参数,注意与reset_index()参数的不同. import pandas as pd df = pd.DataFrame({' ...