Web-Frontend
js-Tutorial
Detailliertes Beispiel für den Kapselungsprozess von Mui-Pull-Up zum Laden weiterer Pull-Down-Aktualisierungsdaten
Detailliertes Beispiel für den Kapselungsprozess von Mui-Pull-Up zum Laden weiterer Pull-Down-Aktualisierungsdaten
In diesem Artikel wird hauptsächlich der Kapselungsprozess des Mui-Pull-Up-Ladens erläutert, um mehr Pull-Down-Aktualisierungsdaten zu laden. Mui-Pull-Up-Laden und Pull-Down-Aktualisierung sind ähnlich und gehören zum PullRefresh-Plug-In. Freunde in Not können darauf verweisen, ich hoffe, es kann allen helfen.
Ich habe Mui verwendet, um zwei Projekte zu erstellen, und habe dann nach unten gezogen, um die Daten zu aktualisieren. Ich hoffe, dass es Freunden in Not helfen kann 🎜>
Demo-Projekt Die Struktur von
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>mui上拉刷新下拉加载demo--封装</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="external nofollow" rel="stylesheet"/>
<style type="text/css">
li{
height: 30px;
line-height: 30px;
font-size: 14px;
color: #bbb;
text-indent: 4%;
border-bottom: 1px solid currentColor;
}
</style>
</head>
<body>
<!--下拉刷新容器-->
<p id="refreshContainer" class="mui-content mui-scroll-wrapper">
<p class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron" id="list">
</ul>
</p>
</p>
</body>
<script type="text/javascript" charset="utf-8">
var pager = {};//分页
var totalPage;//总页码
pullRefresh(pager);//启用上拉下拉
function pullRefresh(){
mui("#refreshContainer").pullRefresh({
up:{
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没 有 更 多 数 据 了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
window.setTimeout(function(){
getData(pager);
},500);
}
},
down : {
height:50,//可选,默认50.触发下拉刷新拖动距离,
auto: true,//可选,默认false.首次加载自动下拉刷新一次
contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback :function(){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
window.setTimeout(function(){
pager['size']= 3;//条数
pager['page'] = 1;//页码
//刷新要先清空父节点里面的子节点
var f = document.getElementById("list");
var childs = f.childNodes;
for(var i = childs.length - 1; i >= 0; i--) {
f.removeChild(childs[i]);
}
getData(pager);
},500);
}
}
})
}
//这个方法是负责向接口请求数据的，你可以选择你喜欢的方式，我这里是直接用的mui.ajax
function getData(params){
mui.ajax("/article/getArticlePage",{
data:{
"header":{"os":"wap","app":"xxxx","ver":1.0},
"data":params
},
dataType:'json',
type:'post',
headers:{'Content-Type':'application/json'},
success:function(data){
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
//下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
var returnData = data.data;
var element=document.getElementById("list");
var para;
var node;
for(var i = 0; i<returnData.length;i++){
para = document.createElement("li");
node = document.createTextNode(returnData[i].article_title)
para.appendChild(node);
element.appendChild(para);
}
//这里很重要，这里获取页码 公式：总条数/每页显示条数
totalPage = data.ext%pager.size!=0?
parseInt(data.ext/pager.size)+1:
data.ext/pager.size;
if(totalPage==pager.page){//总页码等于当前页码，停止上拉下拉
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
}else{
pager.page++;
mui('#refreshContainer').pullRefresh().refresh(true);
}
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
})
}
</script>
</html>
<p id="pullrefresh" class="mui-content mui-scroll-wrapper">
<p id="mui-scroll" class="mui-scroll">
<ul id="refresh-ul" class="mui-table-view">
<!-- 内容 -->
</ul>
</p>
</p>
<script type="text/javascript">
mui('body').on('tap','a',function(){document.location.href=this.href;});//监听让页面A标签的超链接 是有效状态
mui.init({
pullRefresh : {
container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
up : {
height:50,//可选,默认50.触发下拉刷新拖动距离,
auto: true,//可选,默认false.自动下拉刷新一次
contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback :function(){
//业务逻辑代码，比如通过ajax从服务器获取新数据；
//注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
//mui('#refresh-ul').pullRefresh().endPullupToRefresh(); //refresh completed
var pagecount=$("#pagecount").val();
var page=$("#page").val();
pagecount=parseInt(pagecount);
page=parseInt(page);
page+=1;
$.ajax({
url:"/mobile/seckill/order/order_refresh_ajax.jhtml",
type: 'post',
datatype:'html',
data: {'pagecount': pagecount,'page':page},
async: false,//false代表只有在等待ajax执行完毕后才执行
success: function(data,msg){
$("#refresh-ul").append(data);
$("#page").val(page);
},
error: function(data,msg){
alert("error");
}
});
this.endPullupToRefresh(false);
} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
if(mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
function goShoppingCart() {
window.location.href = "/mobile/seckill/shoppingcart.jhtml";
}
</script>PHP-Funktionspaket mit Kommas für jeweils drei Ziffern
Über Ajax-Sekundärverpackungs-JQuery
Einführung in drei Methoden der JavaScript-Simulation zur Erzielung einer Kapselung und ihre Unterschiede
Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für den Kapselungsprozess von Mui-Pull-Up zum Laden weiterer Pull-Down-Aktualisierungsdaten. 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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
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
1675
14
1429
52
1333
25
1278
29
1257
24
![Fehler beim Laden des Plugins in Illustrator [Behoben]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Fehler beim Laden des Plugins in Illustrator [Behoben]
Feb 19, 2024 pm 12:00 PM
Erscheint beim Starten von Adobe Illustrator eine Meldung über einen Fehler beim Laden des Plug-Ins? Bei einigen Illustrator-Benutzern ist dieser Fehler beim Öffnen der Anwendung aufgetreten. Der Meldung folgt eine Liste problematischer Plugins. Diese Fehlermeldung weist darauf hin, dass ein Problem mit dem installierten Plug-In vorliegt, es kann jedoch auch andere Gründe haben, beispielsweise eine beschädigte Visual C++-DLL-Datei oder eine beschädigte Einstellungsdatei. Wenn dieser Fehler auftritt, werden wir Sie in diesem Artikel bei der Behebung des Problems unterstützen. Lesen Sie daher weiter unten weiter. Fehler beim Laden des Plug-Ins in Illustrator Wenn Sie beim Versuch, Adobe Illustrator zu starten, die Fehlermeldung „Fehler beim Laden des Plug-Ins“ erhalten, können Sie Folgendes verwenden: Als Administrator
Stremio-Untertitel funktionieren nicht; Fehler beim Laden der Untertitel
Feb 24, 2024 am 09:50 AM
Untertitel funktionieren bei Stremio auf Ihrem Windows-PC nicht? Einige Stremio-Benutzer berichteten, dass in den Videos keine Untertitel angezeigt wurden. Viele Benutzer berichteten, dass ihnen die Fehlermeldung „Fehler beim Laden der Untertitel“ angezeigt wurde. Hier ist die vollständige Fehlermeldung, die bei diesem Fehler angezeigt wird: Beim Laden der Untertitel ist ein Fehler aufgetreten. Untertitel konnten nicht geladen werden: Dies könnte ein Problem mit dem von Ihnen verwendeten Plugin oder Ihrem Netzwerk sein. Wie in der Fehlermeldung angegeben, könnte es Ihre Internetverbindung sein, die den Fehler verursacht. Überprüfen Sie daher bitte Ihre Netzwerkverbindung und stellen Sie sicher, dass Ihr Internet ordnungsgemäß funktioniert. Abgesehen davon könnte es auch andere Gründe für diesen Fehler geben, darunter ein widersprüchliches Untertitel-Add-on, nicht unterstützte Untertitel für bestimmte Videoinhalte und eine veraltete Stremio-App. wie
PHP implementiert das unendliche Scrollen
Jun 22, 2023 am 08:30 AM
Mit der Entwicklung des Internets müssen immer mehr Webseiten das Laden durch Scrollen unterstützen, und das Laden durch unendliches Scrollen ist eine davon. Dadurch kann die Seite kontinuierlich neue Inhalte laden, sodass Benutzer reibungsloser im Internet surfen können. In diesem Artikel stellen wir vor, wie man das Laden von unendlichem Scrollen mit PHP implementiert. 1. Was ist unendliches Scrollen? Infinite Scroll Loading ist eine Methode zum Laden von Webinhalten basierend auf Bildlaufleisten. Sein Prinzip besteht darin, dass, wenn der Benutzer zum Ende der Seite scrollt, Hintergrunddaten asynchron über AJAX abgerufen werden, um kontinuierlich neue Inhalte zu laden. Diese Art von Lademethode
So lösen Sie das Problem, dass CSS nicht geladen werden kann
Oct 20, 2023 am 11:29 AM
Zu den Lösungen für das Problem, dass CSS nicht geladen werden kann, gehören die Überprüfung des Dateipfads, die Überprüfung des Dateiinhalts, das Löschen des Browser-Cache, die Überprüfung der Servereinstellungen, die Verwendung von Entwicklertools und die Überprüfung der Netzwerkverbindung. Detaillierte Einführung: 1. Überprüfen Sie zunächst den Pfad der CSS-Datei. Wenn sich die CSS-Datei in einem anderen Teil oder Unterverzeichnis der Website befindet, müssen Sie den richtigen Pfad angeben Die CSS-Datei befindet sich im Stammverzeichnis. 2. Überprüfen Sie den Dateiinhalt. Wenn der Pfad korrekt ist, liegt das Problem möglicherweise in der CSS-Datei usw.
Outlook friert beim Einfügen eines Hyperlinks ein
Feb 19, 2024 pm 03:00 PM
Wenn beim Einfügen von Hyperlinks in Outlook Probleme beim Einfrieren auftreten, kann dies an instabilen Netzwerkverbindungen, alten Outlook-Versionen, Störungen durch Antivirensoftware oder Add-In-Konflikten liegen. Diese Faktoren können dazu führen, dass Outlook Hyperlink-Vorgänge nicht ordnungsgemäß verarbeitet. Beheben, dass Outlook beim Einfügen von Hyperlinks einfriert. Verwenden Sie die folgenden Korrekturen, um das Einfrieren von Outlook beim Einfügen von Hyperlinks zu beheben: Überprüfen Sie installierte Add-Ins. Aktualisieren Sie Outlook. Deaktivieren Sie vorübergehend Ihre Antivirensoftware und versuchen Sie dann, ein neues Benutzerprofil zu erstellen. Office-Apps reparieren. Programm deinstallieren und neu installieren. Los geht's. 1] Überprüfen Sie die installierten Add-Ins. Möglicherweise verursacht ein in Outlook installiertes Add-In das Problem.
Was soll ich tun, wenn Windows 7 den USB-Treiber nicht laden kann?
Jul 11, 2023 am 08:13 AM
Bei der Installation des Win7-Systems stießen einige Internetnutzer auf eine Situation, in der das Laden des USB-Treibers fehlschlug. Das USB-Gerät konnte im neuen Win7-System nicht erkannt werden und gängige USB-Sticks, Mäuse und andere Geräte konnten nicht verwendet werden. Was soll ich also tun, wenn bei der Installation von Win7 der USB-Treiber nicht geladen werden kann? Lassen Sie sich von Xiaobai zeigen, wie Sie das Problem lösen können, dass der USB-Treiber bei der Installation von Win7 nicht geladen werden kann. Methode 1: 1. Zuerst schalten wir den Computer ein, rufen das Computersystem auf und überprüfen die Computersystemversion im Computersystem. Überprüfen Sie, ob die Version des Computersystems mit der Version des Gerätetreibers übereinstimmt. 2. Nachdem Sie die Treiberversion bestätigt haben, schließen Sie das USB-Gerät an das Computersystem an. Das Computersystem zeigt an, dass das Gerät keine Verbindung zum System herstellen kann. 3. Klicken Sie auf der Seite mit den Verbindungsinformationen auf die Schaltfläche „Hilfe“, um die Hilfeinformationen anzuzeigen. 4. Wenn die Computerabteilung
Wie kann ich mit JavaScript den Endlos-Scroll-Effekt erzielen, der automatisch geladen wird, wenn zum Ende der Seite gescrollt wird?
Oct 27, 2023 pm 06:30 PM
Wie erreicht JavaScript den Endlos-Scroll-Effekt, der automatisch geladen wird, wenn zum Ende der Seite gescrollt wird? Der Infinite-Scroll-Effekt ist eine der häufigsten Funktionen in der modernen Webentwicklung. Er kann beim Scrollen zum Ende der Seite automatisch mehr Inhalte laden, sodass Benutzer mehr Daten oder Ressourcen erhalten, ohne manuell auf Schaltflächen oder Links klicken zu müssen. In diesem Artikel untersuchen wir, wie Sie JavaScript verwenden, um diese Funktionalität zu erreichen, und stellen spezifische Codebeispiele bereit. Um den unendlichen Bildlaufeffekt zu erzielen, der beim Scrollen zum Ende der Seite automatisch geladen wird, ist er hauptsächlich in Folgendes unterteilt
Eine vollständige Anleitung zum unendlichen Scrollen mit Vue.js
Jun 09, 2023 pm 04:11 PM
Da die Datenmenge immer weiter zunimmt, ist das scrollende Laden von Webseiten nach und nach zu einem wichtigen Teil des Benutzererlebnisses geworden. In diesem Beitrag besprechen wir eine vollständige Anleitung zur Implementierung des unendlichen Scroll-Ladens mit Vue.js. Was ist unendliches Scrollen? Infinite Scroll Loading, auch Infinite Scroll Loading genannt, ist eine Webdesign-Technik, mit der mehr Inhalte hinzugefügt werden, wenn der Benutzer zum Ende der Seite scrollt. Diese Technologie wird häufig in Blogs, sozialen Medien, Online-Shops und anderen Websites verwendet, die Inhalte dynamisch anzeigen müssen. Unendliches Scrollen ist nicht dasselbe wie Paginierung. Beim herkömmlichen Paging müssen Benutzer dies tun
