溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了MUI如何實(shí)現(xiàn)上拉加載和下拉刷新效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
編寫存儲(chǔ)過程分頁（此處使用T-SQL）
CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar(max), --字段字符串 @strWhere varchar(max), --where條件 @PageIndex int, --頁碼 @PageSize int, --每頁容納的記錄數(shù) @Sort VARCHAR(255), --排序字段及規(guī)則,不用加order by @IsGetCount bit --是否得到記錄總數(shù)，1為得到記錄總數(shù)，0為不得到記錄總數(shù)，返回記錄集 ) 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部分封裝了，此處是調(diào)用形式）
/// 測試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);
}頁面實(shí)現(xiàn)
<!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>
/**
數(shù)據(jù)源分頁參數(shù)對象
* */
var obj={ tab:'SystemUsers',
strFld:'code,Username',
strWhere:'1=1',
PageIndex:1,
PageSize:10,
Sort:'Username',
IsGetCount:0,
pageCount:0
}
//webApi服務(wù)器接口
var apiUrl="http://192.168.200.114:8123/api/Common/Base/test";
/**
* 定義數(shù)據(jù)源按什么html方式展示，動(dòng)態(tài)生成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); //替換參數(shù)疊加
}
return html;
}
mui.ready(function(){
/**
MUI配置項(xiàng)
* */
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
}, //END 下拉刷新
up : {
contentrefresh : "正在加載...",//可選，正在加載狀態(tài)時(shí)，上拉加載控件上顯示的標(biāo)題內(nèi)容
contentnomore:'沒有更多數(shù)據(jù)了',//可選，請求完畢若沒有更多數(shù)據(jù)時(shí)顯示的提醒內(nèi)容；
callback :pullupRefresh //必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來編寫，比如通過ajax從服務(wù)器獲取新數(shù)據(jù)；
} //END 上拉加載
}
});
//統(tǒng)計(jì)：數(shù)據(jù)總數(shù)、分頁總數(shù)
obj.IsGetCount=1;
loadData(apiUrl,obj,0);
//初始化列表數(shù)據(jù)（第一頁）
obj.IsGetCount=0;
loadData(apiUrl,obj,0,"down",function(data){
//此處實(shí)現(xiàn)動(dòng)態(tài)繪制DOM的邏輯，根據(jù)數(shù)據(jù)源自行處理要展示的html方式
return drawHtml(data);
});
});
/*
讀取數(shù)據(jù)源
url：api地址
dataObj：數(shù)據(jù)源分頁查詢參數(shù)對象
Timeout：指定多少時(shí)間后繪制頁面DOM展示對象，
動(dòng)態(tài)生成的元素代碼包含在一個(gè)setTimeout函數(shù)里，
用 setTimeout，主要對于下拉刷新間隔時(shí)間
loadType：加載方式：up(上拉加載)、down(上拉刷新)
drawFunction：回調(diào)函數(shù)，處理拿到數(shù)據(jù)源，繪制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) {
//統(tǒng)計(jì)出數(shù)據(jù)總數(shù)
if(dataObj.IsGetCount==1)
{
obj.pageCount=Math.ceil(parseInt(data[0].Column1)/obj.PageSize) ;
return;
}
setTimeout(function() {
//動(dòng)態(tài)繪制出的Dom元素，結(jié)合數(shù)據(jù)展現(xiàn)
var html= drawFunction(data);
if(loadType=="up") //上拉加載
{
if(obj.PageIndex==obj.pageCount)
{
//參數(shù)為true代表沒有更多數(shù)據(jù)了。
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
else
{
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
}
//將下一頁數(shù)據(jù)追加到容器
document.getElementById("container").innerHTML=document.getElementById("container").innerHTML+html;
}
else if(loadType=="down") //下拉刷新
{
// 該方法的作用是關(guān)閉“正在刷新”的樣式提示，內(nèi)容區(qū)域回滾頂部位置
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
//將第一頁數(shù)據(jù)覆蓋到容器
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();
/**
* 下拉刷新具體業(yè)務(wù)實(shí)現(xiàn)
*/
function pulldownRefresh() {
console.log('重置數(shù)據(jù)，初始到第一頁');
obj.PageIndex=1;
loadData(apiUrl,obj,1000,"down",function(data){
//此處實(shí)現(xiàn)動(dòng)態(tài)繪制DOM的邏輯，根據(jù)數(shù)據(jù)源自行處理要展示的html方式
return drawHtml(data);
});
} //END pulldownRefresh() 下拉刷新函數(shù)
/**
* 上拉加載具體業(yè)務(wù)實(shí)現(xiàn)
*/
function pullupRefresh() {
obj.PageIndex++;//當(dāng)前頁累加，加載下一頁的數(shù)據(jù)
console.log("加載第："+obj.PageIndex+"頁");
console.log("頁總數(shù)："+obj.pageCount);
loadData(apiUrl,obj,1000,"up",function(data){
//此處實(shí)現(xiàn)動(dòng)態(tài)繪制DOM的邏輯，根據(jù)數(shù)據(jù)源自行處理要展示的html方式
return drawHtml(data);
});
}
</script>
</body>
</html>感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“MUI如何實(shí)現(xiàn)上拉加載和下拉刷新效果”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼