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

時間 2019-11-12

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

原文原文鏈接

----------------------------------------------- 這是一個很是呆萌的程序妹子，深夜碼的醜代碼------------------------------------------------javascript

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

demo項目的結構html

直接貼代碼了 vue

index.htmljava

mui上拉刷新下拉加載都這裏了，兩個方法搞定node

<!--
	做者：online
	時間：2017-11-02
	描述：
-->
<!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>

代碼就貼完了就是看起來不是很好看jquery

下面是效果圖，想弄視頻上來的而後發現太雞肋了弄不上來氣死我了web

MUI 上拉下拉雙webview模式 ajax

接口返回數據格式json

ext---總條數

data---返回數據