登录 注册

H5上拉加载更多

发布时间:Jun 12, 2019 10:28:05 AM 发布人:管理员


归属栏目: HTML5开发


外部链接: 


关键字: 


归属栏目: HTML5开发


文章来源: 


摘要: 

H5上拉加载更多,下拉刷新

本文介绍在开发Html5移动应用程序的时候,如何实现手势的操作,包括:向上拉动屏幕完成加载更新,向下拉动屏幕完成应用内容刷新,相关实例代码如下:

 

 

<!DOCTYPE html>

 

 

<html>

      <head>

            <meta charset="utf-8">

            <title>我的任务</title>

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

            <meta name="apple-mobile-web-app-capable" content="yes">

            <meta name="apple-mobile-web-app-status-bar-style" content="black">

            <script src="<%=request.getContextPath()%>/mobile/js/mui.min.js"></script>

            <link rel="stylesheet" href="<%=request.getContextPath()%>/mobile/css/mui.min.css">

            <link rel="stylesheet" href="<%=request.getContextPath()%>/mobile/css/plan.css" />

            <script type="text/javascript" src="<%=request.getContextPath()%>/mobile/js/jquery-1.11.0.js"></script>

</head>

<body style="height: 100%;">

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

                  <div class="mui-scroll">

                        <div class="back-pro" id="myRWs">

                                   此处为滚动的列表

                        </div>

                  </div>

            </div>

            <script src="<%=request.getContextPath()%>/mobile/js/public.js" type="text/javascript"></script>

            <script type="text/javascript" src="<%=request.getContextPath()%>/mobile/js/plan.js"></script>

      <script type="text/javascript">

       //初始化

            mui.init({

                  pullRefresh : {

                        container : "#rwpullrefresh", //下拉刷新容器标识

                        up : {

                               height : 50, //可选.默认50.触发上拉加载拖动距离

                               contentover : "释放立即加载",

                               contentrefresh : "正在加载...",

                               contentnomore : '没有更多数据了',

                               callback : pullupFresh

                        },

                        down : {

                                auto:true,//第一次加载

                               contentdown : "下拉可以刷新",

                               contentover : "释放立即刷新",

                               contentrefresh : "正在刷新...",

                               callback : pullDownFresh

                        }

                  }

            });

 

            mui('#myRWs').on('tap', 'a', function() {//a点击事件

                  document.location.href = this.href;

            });

      </script>

</body>

</html>

js内容

//获取任务列表

function getRWList(){

      $.ajax({

                      url: "com.jinke.omp.task.taskManager.getTask.biz.ext",

                      data:JSON.stringify({"pageIndex":rwpage,"pageSize":pageSize,"page":{"begin":rwpage*pageSize,"length":pageSize}}),

                      type: "post",

                      contentType: "text/json",

                      success: function (text) {

                           var returnJson = text;

                      var datas=returnJson.data;

                      if(returnJson.currentPage>=returnJson.totalPage){

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

                            }else{

                                  mui('#rwpullrefresh').pullRefresh().endPullupToRefresh(false);

                            }

                      var html="";

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

                                     {

                                     html+="<div class=\"xmli\"><div class=\"bpl\">"

                                           +"<p class=\"xmti\"><a href=\"rdetail.jsp?operate="+datas[i].operate+"&person="+datas[i].person+"&workItemId="+datas[i].workItemId+"\">"+datas[i].workName+"</a></p>"

                                           +"<p class=\"xmzt\">计划完成时间:<span>"+(datas[i].FINISHDATE==null?'':datas[i].FINISHDATE)+"</span></p>"

                                           +"<p class=\"xmna\">"+datas[i].planName+"</p>"

                                           +"</div>"

                                           +"<div class=\"bpr\">"

                                           +"<p class=\"xmsj\">"+datas[i].typeName+"</p>"

                                           +"<p class=\"xmst\"><span class=\"color"+datas[i].status+"\"></span>"+statusMap[datas[i].status]+"</p>"

                                           + getopenHTML1(datas[i].operate,datas[i].person,datas[i].workItemId)

                                           +"</div>"

                                           +"</div>";

                                     }

                      if(rwpage==0){//下拉刷新

                      $('#myRWs').html(html);

                      }else{

                      $('#myRWs').append(html);

                      }

                   }

            });

      }

//  上拉加载

function pullupFresh() {

       rwpage++;

    setTimeout(function() {

       getRWList();

    }, 1000);

}

//  下拉刷新

function pullDownFresh() {

      rwpage=0;

    setTimeout(function(){

       getRWList();

        mui('#rwpullrefresh').pullRefresh().endPulldownToRefresh();

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

    }, 1000);

}

 }


相关文章

返回