mui實現分頁上拉加載更多下拉刷新數據的簡單實現移動端下拉上拉

時間 2019-12-13

標籤 mui 實現分頁加載更多下拉刷新數據簡單移動欄目無線简体版

原文原文鏈接

空下來把mui上拉加載更多，下拉刷新數據作了一個簡單的實現，但願能夠幫助到須要的朋友javascript

demo項目的結構css

<!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>