Web-Frontend
js-Tutorial
Beispielfreigabe einer MUI-Implementierung von Pull-up-Laden und Pull-down-Aktualisierung
Beispielfreigabe einer MUI-Implementierung von Pull-up-Laden und Pull-down-Aktualisierung
In diesem Artikel werden hauptsächlich die Pull-up-Lade- und Pulldown-Aktualisierungseffekte von MUI ausführlich vorgestellt. Interessierte Freunde können sich darauf beziehen.
Die Beispiele in diesem Artikel teilen MUI Der spezifische Code zum Implementieren des Pull-Up-Ladens und der Pull-Down-Aktualisierungsanzeige lautet wie folgt:
Schreibengespeicherte ProzedurPaging (Hier wird T-SQL verwendet)
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-Schnittstelle (ADO.NET ist teilweise gekapselt, hier ist das Aufrufformular)
/// 测试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);
}Seitenimplementierung
<!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>Das obige ist der detaillierte Inhalt vonBeispielfreigabe einer MUI-Implementierung von Pull-up-Laden und Pull-down-Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
SVM-Beispiele in Python
Jun 11, 2023 pm 08:42 PM
Support Vector Machine (SVM) in Python ist ein leistungsstarker überwachter Lernalgorithmus, der zur Lösung von Klassifizierungs- und Regressionsproblemen verwendet werden kann. SVM eignet sich gut für den Umgang mit hochdimensionalen Daten und nichtlinearen Problemen und wird häufig in den Bereichen Data Mining, Bildklassifizierung, Textklassifizierung, Bioinformatik und anderen Bereichen eingesetzt. In diesem Artikel stellen wir ein Beispiel für die Verwendung von SVM zur Klassifizierung in Python vor. Wir werden das SVM-Modell aus der scikit-learn-Bibliothek verwenden
VUE3-Erste-Schritte-Beispiel: Erstellen eines einfachen Videoplayers
Jun 15, 2023 pm 09:42 PM
Da die neue Generation von Front-End-Frameworks weiter auf dem Vormarsch ist, erfreut sich VUE3 als schnelles, flexibles und benutzerfreundliches Front-End-Framework großer Beliebtheit. Als Nächstes lernen wir die Grundlagen von VUE3 kennen und erstellen einen einfachen Videoplayer. 1. VUE3 installieren Zuerst müssen wir VUE3 lokal installieren. Öffnen Sie das Befehlszeilentool und führen Sie den folgenden Befehl aus: npminstallvue@next Erstellen Sie dann eine neue HTML-Datei und führen Sie VUE3 ein: <!doctypehtml>
Erfahren Sie Best-Practice-Beispiele für die Zeigerkonvertierung in Golang
Feb 24, 2024 pm 03:51 PM
Golang ist eine leistungsstarke und effiziente Programmiersprache, mit der sich verschiedene Anwendungen und Dienste entwickeln lassen. In Golang sind Zeiger ein sehr wichtiges Konzept, das uns helfen kann, Daten flexibler und effizienter zu verwalten. Die Zeigerkonvertierung bezieht sich auf den Prozess der Zeigeroperation zwischen verschiedenen Typen. In diesem Artikel werden anhand konkreter Beispiele die Best Practices der Zeigerkonvertierung in Golang erläutert. 1. Grundkonzepte In Golang hat jede Variable eine Adresse, und die Adresse ist der Speicherort der Variablen im Speicher.
Beispiel für einen VAE-Algorithmus in Python
Jun 11, 2023 pm 07:58 PM
VAE ist ein generatives Modell. Der vollständige Name lautet VariationalAutoencoder, was ins Chinesische als Variational Autoencoder übersetzt wird. Es handelt sich um einen unbeaufsichtigten Lernalgorithmus, der zur Generierung neuer Daten wie Bilder, Audio, Text usw. verwendet werden kann. Im Vergleich zu herkömmlichen Autoencodern sind VAEs flexibler und leistungsfähiger und können komplexere und realistischere Daten generieren. Python ist eine der am weitesten verbreiteten Programmiersprachen und eines der wichtigsten Werkzeuge für Deep Learning. In Python gibt es viele hervorragende und tiefe maschinelle Lernmethoden
Beispiele für die Verwendung von Verifizierungscodes im Gin-Framework
Jun 23, 2023 am 08:10 AM
Mit der Popularität des Internets sind Verifizierungscodes zu einem notwendigen Prozess für die Anmeldung, Registrierung, das Abrufen von Passwörtern und andere Vorgänge geworden. Im Gin-Framework ist die Implementierung der Verifizierungscode-Funktion extrem einfach geworden. In diesem Artikel wird erläutert, wie eine Bibliothek eines Drittanbieters zum Implementieren der Verifizierungscodefunktion im Gin-Framework verwendet wird, und es wird Beispielcode als Referenz für die Leser bereitgestellt. 1. Abhängige Bibliotheken installieren Bevor wir den Bestätigungscode verwenden können, müssen wir die Bibliothek goCaptcha eines Drittanbieters installieren. Um goCaptcha zu installieren, können Sie den goget-Befehl verwenden: $goget-ugithub
Die Beziehung zwischen der Anzahl der Oracle-Instanzen und der Datenbankleistung
Mar 08, 2024 am 09:27 AM
Die Beziehung zwischen der Anzahl der Oracle-Instanzen und der Datenbankleistung Oracle-Datenbank ist eines der bekanntesten relationalen Datenbankverwaltungssysteme in der Branche und wird häufig für die Datenspeicherung und -verwaltung auf Unternehmensebene verwendet. In Oracle-Datenbanken ist die Instanz ein sehr wichtiges Konzept. Instanz bezieht sich auf die laufende Umgebung der Oracle-Datenbank im Speicher. Jede Instanz verfügt über eine unabhängige Speicherstruktur und einen Hintergrundprozess, der zur Verarbeitung von Benutzeranforderungen und zur Verwaltung von Datenbankvorgängen verwendet wird. Die Anzahl der Instanzen hat einen wichtigen Einfluss auf die Leistung und Stabilität der Oracle-Datenbank.
Beispiel für die Entwicklung eines einfachen PHP-Webcrawlers
Jun 13, 2023 pm 06:54 PM
Mit der rasanten Entwicklung des Internets sind Daten zu einer der wichtigsten Ressourcen im heutigen Informationszeitalter geworden. Als Technologie zur automatischen Erfassung und Verarbeitung von Netzwerkdaten erregen Webcrawler immer mehr Aufmerksamkeit und Anwendung. In diesem Artikel wird erläutert, wie Sie mit PHP einen einfachen Webcrawler entwickeln und die Funktion zum automatischen Abrufen von Netzwerkdaten realisieren. 1. Überblick über Web Crawler Web Crawler ist eine Technologie, die automatisch Netzwerkressourcen abruft und verarbeitet. Ihr Hauptarbeitsprozess besteht darin, das Browserverhalten zu simulieren, automatisch auf bestimmte URL-Adressen zuzugreifen und alle Informationen zu extrahieren.
Beispiel für einen GAN-Algorithmus in Python
Jun 10, 2023 am 09:53 AM
Generative Adversarial Networks (GAN) ist ein Deep-Learning-Algorithmus, der zwei neuronale Netze nutzt, um miteinander zu konkurrieren und neue Daten zu generieren. GAN wird häufig für Generierungsaufgaben in den Bereichen Bild, Audio, Text und anderen Bereichen verwendet. In diesem Artikel werden wir Python verwenden, um ein Beispiel für einen GAN-Algorithmus zum Generieren von Bildern handgeschriebener Ziffern zu schreiben. Vorbereitung des Datensatzes Wir werden den MNIST-Datensatz als unseren Trainingsdatensatz verwenden. Der MNIST-Datensatz enthält
