MUI實(shí)現(xiàn)上拉加載和下拉刷新效果
更新時間：2017年06月30日 16:09:25 作者：姜承軒
這篇文章主要為大家詳細(xì)介紹了MUI實(shí)現(xiàn)上拉加載和下拉刷新效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了MUI實(shí)現(xiàn)上拉加載和下拉刷新展示的具體代碼，供大家參考，具體內(nèi)容如下
編寫存儲過程分頁（此處使用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">
<h1 class="mui-title">下拉刷新（單webview模式）</h1>
</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" style="display: none;">
<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方式展示，動態(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)時，上拉加載控件上顯示的標(biāo)題內(nèi)容
contentnomore:'沒有更多數(shù)據(jù)了',//可選，請求完畢若沒有更多數(shù)據(jù)時顯示的提醒內(nèi)容；
callback :pullupRefresh //必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來編寫，比如通過ajax從服務(wù)器獲取新數(shù)據(jù)；
} //END 上拉加載
}
});
//統(tǒng)計：數(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)動態(tài)繪制DOM的邏輯，根據(jù)數(shù)據(jù)源自行處理要展示的html方式
return drawHtml(data);
});
});
/*
讀取數(shù)據(jù)源
url：api地址
dataObj：數(shù)據(jù)源分頁查詢參數(shù)對象
Timeout：指定多少時間后繪制頁面DOM展示對象，
動態(tài)生成的元素代碼包含在一個setTimeout函數(shù)里，
用 setTimeout，主要對于下拉刷新間隔時間
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)計出數(shù)據(jù)總數(shù)
if(dataObj.IsGetCount==1)
{
obj.pageCount=Math.ceil(parseInt(data[0].Column1)/obj.PageSize) ;
return;
}
setTimeout(function() {
//動態(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)動態(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)動態(tài)繪制DOM的邏輯，根據(jù)數(shù)據(jù)源自行處理要展示的html方式
return drawHtml(data);
});
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用原生js封裝webapp滑動效果,具有慣性滑動、滑動回彈功能,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了如何自定義微信小程序tabbar上邊框的顏色,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
你應(yīng)該了解的JavaScript Array.map()五種用途小結(jié)
大家都知道m(xù)ap() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。下面這篇文章主要給大家介紹了關(guān)于JavaScript Array.map()的五種用途，需要的朋友可以參考下2018-11-11
打算做一個js面向?qū)ο蟮呢澇陨?但是最終是流產(chǎn)了,整理了下廢棄的代碼,回顧了下PPT.想學(xué)習(xí)js面向?qū)ο蟮呐笥岩部梢詤⒖枷隆?/div> 2011-08-08
echarts自定義tooltip中的內(nèi)容代碼示例
在ECharts中,通過formatter函數(shù)自定義圖例樣式,可以實(shí)現(xiàn)更靈活的圖表展示,滿足特定的視覺需求,這篇文章主要介紹了echarts自定義tooltip中內(nèi)容的相關(guān)資料,需要的朋友可以參考下2024-10-10
微信小程序如何實(shí)現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能
最近在學(xué)微信小程序開發(fā)的時候,碰上了一個問題,所以想著總結(jié)下,這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能的相關(guān)資料,需要的朋友可以參考下2022-04-04
如何寫一個通用的JavaScript效果庫！(2/2)...2007-04-04
這篇文章主要介紹了js判斷非127開頭的IP地址,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式(一)
這篇文章主要介紹了如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
javascript DOM對象的學(xué)習(xí)實(shí)例代碼
javascript DOM對象的學(xué)習(xí)實(shí)例代碼2009-06-06最新評論