這篇文章主要介紹了MUI如何實現上拉加載和下拉刷新效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
編寫存儲過程分頁（此處使用T-SQL）
CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar(max), --字段字符串 @strWhere varchar(max), --where條件 @PageIndex int, --頁碼 @PageSize int, --每頁容納的記錄數 @Sort VARCHAR(255), --排序字段及規則,不用加order by @IsGetCount bit --是否得到記錄總數，1為得到記錄總數，0為不得到記錄總數，返回記錄集 ) AS declare @strSql nvarchar(max) set nocount on; if(@IsGetCount = 1) begin set @strSql='SELECT COUNT(0) FROM ' + @tab + ' WHERE ' + @strWhere end else begin set @strSql=' SELECT * FROM (SELECT ROW_NUMBER() OVER(ORDER BY ' + @Sort + ') AS rownum, ' + @strFld + ' FROM ' + @tab + ' where ' + @strWhere + ') AS Dwhere WHERE rownum BETWEEN ' + CAST(((@PageIndex-1)*@PageSize + 1) as nvarchar(20)) + ' and ' + cast((@PageIndex*@PageSize) as nvarchar(20)) end print @strSql exec (@strSql) set nocount off;
webApi接口（ADO.NET部分封裝了，此處是調用形式）
/// 測試mui下拉刷新
/// </summary>
/// <param name="flag"></param>
/// <returns></returns>
[HttpPost]
public object test(JObject data)
{
using (var db = new DbBase())
{
SqlParameter[] arr = {
new SqlParameter{ ParameterName="tab",Value=data["tab"].ToString()},
new SqlParameter{ ParameterName="strFld",Value=data["strFld"].ToString()},
new SqlParameter{ ParameterName="strWhere",Value=data["strWhere"].ToString()},
new SqlParameter{ ParameterName="PageIndex",Value=Convert.ToInt32(data["PageIndex"])},
new SqlParameter{ ParameterName="PageSize",Value=Convert.ToInt32(data["PageSize"])},
new SqlParameter{ ParameterName="Sort",Value=data["Sort"].ToString()},
new SqlParameter{ ParameterName="IsGetCount",Value=Convert.ToInt32(data["IsGetCount"])},
};
return RepositoryBase.ExecuteReader(db, "Common_PageList", arr);
}頁面實現
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</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">
<link rel="stylesheet" href="../css/mui.min.css" rel="external nofollow" >
<style type="text/css">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h2 class="mui-title">下拉刷新（單webview模式）</h2>
</header>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="container" class="mui-table-view mui-table-view-chevron"></ul>
</div>
</div>
<ul id="temp" class="mui-table-view" >
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
@name
</a>
</li>
</ul>
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script>
/**
數據源分頁參數對象
* */
var obj={ tab:'SystemUsers',
strFld:'code,Username',
strWhere:'1=1',
PageIndex:1,
PageSize:10,
Sort:'Username',
IsGetCount:0,
pageCount:0
}
//webApi服務器接口
var apiUrl="http://192.168.200.114:8123/api/Common/Base/test";
/**
* 定義數據源按什么html方式展示，動態生成html字符串的邏輯
**/
var drawHtml=function(data){
var html=""
for (var i=0;i<data.length;i++)
{
var temp=document.getElementById("temp").innerHTML; //模板
html+=temp.toString().replace('@name',data[i].Username); //替換參數疊加
}
return html;
}
mui.ready(function(){
/**
MUI配置項
* */
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
}, //END 下拉刷新
up : {
contentrefresh : "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容
contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
callback :pullupRefresh //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據；
} //END 上拉加載
}
});
//統計：數據總數、分頁總數
obj.IsGetCount=1;
loadData(apiUrl,obj,0);
//初始化列表數據（第一頁）
obj.IsGetCount=0;
loadData(apiUrl,obj,0,"down",function(data){
//此處實現動態繪制DOM的邏輯，根據數據源自行處理要展示的html方式
return drawHtml(data);
});
});
/*
讀取數據源
url：api地址
dataObj：數據源分頁查詢參數對象
Timeout：指定多少時間后繪制頁面DOM展示對象，
動態生成的元素代碼包含在一個setTimeout函數里，
用 setTimeout，主要對于下拉刷新間隔時間
loadType：加載方式：up(上拉加載)、down(上拉刷新)
drawFunction：回調函數，處理拿到數據源，繪制DOM展示界面的html
，要接收返回的html字符串
* */
var loadData=function(url,dataObj,Timeout,loadType,drawFunction){
mui.ajax(url, {
type: "post",
data:dataObj,
async:false,
headers: {'Content-Type': 'application/json'},
success: function(data) {
//統計出數據總數
if(dataObj.IsGetCount==1)
{
obj.pageCount=Math.ceil(parseInt(data[0].Column1)/obj.PageSize) ;
return;
}
setTimeout(function() {
//動態繪制出的Dom元素，結合數據展現
var html= drawFunction(data);
if(loadType=="up") //上拉加載
{
if(obj.PageIndex==obj.pageCount)
{
//參數為true代表沒有更多數據了。
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
else
{
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
}
//將下一頁數據追加到容器
document.getElementById("container").innerHTML=document.getElementById("container").innerHTML+html;
}
else if(loadType=="down") //下拉刷新
{
// 該方法的作用是關閉“正在刷新”的樣式提示，內容區域回滾頂部位置
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
//將第一頁數據覆蓋到容器
document.getElementById("container").innerHTML=html;
//啟用上拉加載
mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
}
}, Timeout);//END setTimeout();
},//END success();
error: function(xhr, type, errorThrown) {
console.log(type);
}//END error();
});//END ajax();
}//END loadData();
/**
* 下拉刷新具體業務實現
*/
function pulldownRefresh() {
console.log('重置數據，初始到第一頁');
obj.PageIndex=1;
loadData(apiUrl,obj,1000,"down",function(data){
//此處實現動態繪制DOM的邏輯，根據數據源自行處理要展示的html方式
return drawHtml(data);
});
} //END pulldownRefresh() 下拉刷新函數
/**
* 上拉加載具體業務實現
*/
function pullupRefresh() {
obj.PageIndex++;//當前頁累加，加載下一頁的數據
console.log("加載第："+obj.PageIndex+"頁");
console.log("頁總數："+obj.pageCount);
loadData(apiUrl,obj,1000,"up",function(data){
//此處實現動態繪制DOM的邏輯，根據數據源自行處理要展示的html方式
return drawHtml(data);
});
}
</script>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“MUI如何實現上拉加載和下拉刷新效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
