MUI实现上拉加载和下拉刷新的实例分享
这篇文章主要为大家详细介绍了MUI实现上拉加载和下拉刷新效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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">
<h1 class="mui-title">下拉刷新（单webview模式）</h1>
</header>
<p id="pullrefresh" class="mui-content mui-scroll-wrapper">
<p class="mui-scroll">
<ul id="container" class="mui-table-view mui-table-view-chevron"></ul>
</p>
</p>
<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>
/**
数据源分页参数对象
* */
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>Atas ialah kandungan terperinci MUI实现上拉加载和下拉刷新的实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
1207
24
Contoh SVM dalam Python
Jun 11, 2023 pm 08:42 PM
Mesin Vektor Sokongan (SVM) dalam Python ialah algoritma pembelajaran diselia yang berkuasa yang boleh digunakan untuk menyelesaikan masalah klasifikasi dan regresi. SVM berprestasi baik apabila menangani data berdimensi tinggi dan masalah bukan linear, dan digunakan secara meluas dalam perlombongan data, klasifikasi imej, klasifikasi teks, bioinformatik dan bidang lain. Dalam artikel ini, kami akan memperkenalkan contoh penggunaan SVM untuk pengelasan dalam Python. Kami akan menggunakan model SVM daripada perpustakaan scikit-learn
Ketahui contoh amalan terbaik penukaran penunjuk di Golang
Feb 24, 2024 pm 03:51 PM
Golang ialah bahasa pengaturcaraan yang berkuasa dan cekap yang boleh digunakan untuk membangunkan pelbagai aplikasi dan perkhidmatan. Di Golang, penunjuk ialah konsep yang sangat penting, yang boleh membantu kami mengendalikan data dengan lebih fleksibel dan cekap. Penukaran penunjuk merujuk kepada proses operasi penunjuk antara jenis yang berbeza Artikel ini akan menggunakan contoh khusus untuk mempelajari amalan terbaik penukaran penunjuk di Golang. 1. Konsep asas Di Golang, setiap pembolehubah mempunyai alamat, dan alamat adalah lokasi pembolehubah dalam ingatan.
Contoh Permulaan VUE3: Membuat Pemain Video Mudah
Jun 15, 2023 pm 09:42 PM
Apabila rangka kerja hadapan generasi baharu terus muncul, VUE3 digemari sebagai rangka kerja bahagian hadapan yang pantas, fleksibel dan mudah digunakan. Seterusnya, mari kita pelajari asas VUE3 dan buat pemain video mudah. 1. Pasang VUE3 Mula-mula, kita perlu memasang VUE3 secara setempat. Buka alat baris arahan dan laksanakan arahan berikut: npminstallvue@next Kemudian, cipta fail HTML baharu dan perkenalkan VUE3: <!doctypehtml>
Contoh pembangunan perangkak web mudah PHP
Jun 13, 2023 pm 06:54 PM
Dengan perkembangan pesat Internet, data telah menjadi salah satu sumber terpenting dalam era maklumat hari ini. Sebagai teknologi yang memperoleh dan memproses data rangkaian secara automatik, perangkak web semakin menarik perhatian dan aplikasi. Artikel ini akan memperkenalkan cara menggunakan PHP untuk membangunkan perangkak web yang ringkas dan merealisasikan fungsi mendapatkan data rangkaian secara automatik. 1. Gambaran Keseluruhan Web Crawler Web crawler ialah teknologi yang secara automatik memperoleh dan memproses sumber rangkaian Proses kerja utamanya adalah untuk mensimulasikan tingkah laku penyemak imbas, mengakses alamat URL yang ditentukan secara automatik dan mengekstrak semua maklumat.
Contoh algoritma VAE dalam Python
Jun 11, 2023 pm 07:58 PM
VAE ialah model generatif, nama penuhnya ialah VariationalAutoencoder, yang diterjemahkan ke dalam bahasa Cina sebagai autoenkoder variasi. Ia adalah algoritma pembelajaran tanpa pengawasan yang boleh digunakan untuk menjana data baharu, seperti imej, audio, teks, dsb. Berbanding dengan pengekod auto biasa, VAE lebih fleksibel dan berkuasa serta boleh menjana data yang lebih kompleks dan realistik. Python adalah salah satu bahasa pengaturcaraan yang paling banyak digunakan dan salah satu alat utama untuk pembelajaran mendalam. Dalam Python, terdapat banyak pembelajaran mesin yang sangat baik dan mendalam
Hubungan antara bilangan kejadian Oracle dan prestasi pangkalan data
Mar 08, 2024 am 09:27 AM
Hubungan antara bilangan contoh Oracle dan prestasi pangkalan data Pangkalan data Oracle ialah salah satu sistem pengurusan pangkalan data hubungan yang terkenal dalam industri dan digunakan secara meluas dalam penyimpanan dan pengurusan data peringkat perusahaan. Dalam pangkalan data Oracle, contoh adalah konsep yang sangat penting. Contoh merujuk kepada persekitaran berjalan pangkalan data Oracle dalam ingatan Setiap contoh mempunyai struktur memori dan proses latar belakang yang bebas, yang digunakan untuk memproses permintaan pengguna dan mengurus operasi pangkalan data. Bilangan kejadian mempunyai kesan penting terhadap prestasi dan kestabilan pangkalan data Oracle.
Contoh penggunaan kod pengesahan dalam rangka kerja Gin
Jun 23, 2023 am 08:10 AM
Dengan populariti Internet, kod pengesahan telah menjadi proses yang diperlukan untuk log masuk, pendaftaran, mendapatkan kata laluan dan operasi lain. Dalam rangka kerja Gin, melaksanakan fungsi kod pengesahan telah menjadi sangat mudah. Artikel ini akan memperkenalkan cara menggunakan perpustakaan pihak ketiga untuk melaksanakan fungsi kod pengesahan dalam rangka kerja Gin dan menyediakan kod sampel untuk rujukan pembaca. 1. Pasang perpustakaan bergantung Sebelum menggunakan kod pengesahan, kita perlu memasang perpustakaan pihak ketiga goCaptcha. Untuk memasang goCaptcha, anda boleh menggunakan arahan goget: $goget-ugithub
Contoh algoritma GAN dalam Python
Jun 10, 2023 am 09:53 AM
Generative Adversarial Networks (GAN, Generative Adversarial Networks) ialah algoritma pembelajaran mendalam yang menjana data baharu melalui dua rangkaian neural yang bersaing antara satu sama lain. GAN digunakan secara meluas untuk tugas penjanaan dalam imej, audio, teks dan medan lain. Dalam artikel ini, kami akan menggunakan Python untuk menulis contoh algoritma GAN untuk menjana imej digit tulisan tangan. Penyediaan Set Data Kami akan menggunakan set data MNIST sebagai set data latihan kami. Set data MNIST mengandungi
