Um das Hintergrundbild in Uniapp<style> im Vollbildmodus anzuzeigen, können Sie dem Tag die folgenden Stile hinzufügen:
Seite { Hintergrundbild: url('/static/bg.jpg'); Hintergrundgröße: Cover; Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte Mitte; }
In diesem Stil legt das Attribut „Hintergrundbild“ die URL des Hintergrundbilds fest, das Attribut „Hintergrundgröße“ legt die Größe des Hintergrundbilds fest, das Attribut „Hintergrundwiederholung“ legt fest, ob das Hintergrundbild wiederholt werden soll, und das Attribut „Hintergrundposition“ legt fest die Position des Hintergrundbildes. Durch Festlegen der Hintergrundgröße: cover; lässt das Hintergrundbild den gesamten Bildschirm ausfüllen.
Beachten Sie, dass Sie vor dem Festlegen des Hintergrundbilds sicherstellen, dass sich dieses Bild im statischen Ressourcenordner Ihres Projekts befindet. Wenn Sie außerdem möchten, dass das Hintergrundbild einer Seite im Vollbildmodus angezeigt wird, können Sie in <style> auch den Stil der Seite festlegen.
-
So legen Sie das Bild für die Navigation im Uniapp-Applet fest und entfernen die native Navigationsleiste
Ergänzung: Zum Hinzufügen von Eigenschaften unterhalb der globalen Konfigurationsoptionen der Datei „pages.json“.
„navigationStyle“: „benutzerdefiniert“
Dies bedeutet, die ursprüngliche Navigationsleiste zu löschen, die Navigationsleiste selbst zu entwerfen und den Inhalt global zu laden
<template>
<view>
<view class="status_bar">
<!-- Dies ist die Statusleiste-->
</view>
<view> Text unter der Statusleiste</view>
</view>
</template>
< style>
.status_bar { // Dies ist die Höheneinstellung der Navigationsleiste. Es ist besser, die Höhe (50 Pixel) hinzuzufügen. height : var(--status-bar-height); width: 100%; } </style>
<template>
<view class="container">
<view class="content">
<!-- Hintergrundbild der Uniapp-Einstellungsseite -->
<view class="status_bar" :style="{background: 'url(' + imageURL+')'}"> <
!-- Dies ist die Statusleiste -->
<image src="/static/images/Menu icon.png" mode=""></image>
</view>
<view> Text unter der Statusleiste</view>
</view>
</view>
</template>
<script>
export default { data() { return { imageURL:'/static/images/navigation bar background.png' }; } } </script>
<!-- Beachten Sie hier, dass das Attribut lang='scss' in Super-CSS übersetzt wird -->
<style lang="scss">
.status_bar { height: 49px; width: 100%; image { width: 24px; height: 24px ; } } </style>
Der Unterschied zwischen Uniapp Page Jump RedirectTo, NavigierenTo und SwitchTap
Fassen Sie den Seitensprung von Uniapp zusammen:
RedirectTo: Schließt die aktuelle Seite und springt zur angegebenen Seite.
Schließen Sie die aktuelle Seite und springen Sie zu einer Seite in der App. Beschreibung des OBJECT-Parameters Parametertyp ist erforderlich. Beschreibung urlString ist der Pfad der Nicht-TabBar-Seite in der Anwendung, die umgeleitet werden muss. Nach dem Pfad können Parameter hinzugefügt werden. Parameter und Pfade werden durch ? getrennt, Parameterschlüssel und Parameterwerte werden durch = verbunden und verschiedene Parameter werden durch & getrennt;
methods: {
//goregirect()为点击响应事件，可在HTML部分设置 @tap="goregirect()"
goregirect(){
uni.redirectTo({
//关闭当前页面，跳转到应用内的某个页面。
url:'/pages/about/about'
});
}
}
navigationTo: Behalten Sie die aktuelle Seite bei und springen Sie zur angegebenen Seite.
Behalten Sie die aktuelle Seite bei, springen Sie zu einer Seite in der App und kehren Sie mit uni.navigateBack zur ursprünglichen Seite zurück. Beschreibung des OBJECT-Parameters: Der Parametertyp ist erforderlich. Der urlString ist der Pfad der Nicht-TabBar-Seite in der Anwendung, die umgeleitet werden muss. Nach dem Pfad können Parameter hinzugefügt werden. Parameter und Pfade werden durch ? getrennt, Parameterschlüssel und Parameterwerte werden durch = verbunden und verschiedene Parameter werden durch & getrennt;
methods: {
//gonavigate()为点击响应事件，可在HTML部分设置 @tap="gonavigate()"
gonavigate(){
uni.navigateTo({
//保留当前页面，跳转到应用内的某个页面
url:'/pages/detail/detail'
})
}
}
switchTap: Es kann nur verwendet werden, um zur Tabbar-Seite zu springen und andere Nicht-Tabbar-Seiten zu schließen.
Wechseln Sie zur TabBar-Seite und schließen Sie alle anderen Nicht-TabBar-Seiten. Beschreibung des OBJECT-Parameters: Der Parametertyp ist erforderlich, um anzugeben, dass urlString der Pfad der tabBar-Seite ist, die umgeleitet werden muss (die Seite, die im tabBar-Feld von app.json definiert werden muss) und dem Pfad nicht gefolgt werden kann Parameter
methods: {
checklogin(){
uni.request({
url:'http://localhost:8081/api/user/login',
data: {
email:this.emailone,
password:this.password,
},
success: (res) => {
//登录成功
if(res.data.success ==true) {
uni.showToast({
title:'登录成功',//显示的文字
icon:'success'//显示的图标
});
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.switchTab({
url:'../tabbor/index/index'
});
}else{
uni.showToast({
title:'用户名或密码错误',//显示的文字
icon:'none'//显示的图标
});
}
}
})
}
}
NavigierenZurück: Schließen Sie die aktuelle Seite und kehren Sie zur vorherigen Seite oder zu mehrstufigen Seiten zurück.
Schließen Sie die aktuelle Seite und kehren Sie zur vorherigen Seite oder zu mehrstufigen Seiten zurück. Der aktuelle Seitenstapel kann über getCurrentPages() abgerufen werden, um zu bestimmen, wie viele Ebenen zurückgegeben werden müssen. Beschreibung des OBJECT-Parameters: Der Parametertyp ist erforderlich, um die Anzahl der von deltaNumber1 zurückgegebenen Seiten anzugeben. Wenn delta größer als die Anzahl vorhandener Seiten ist, wird zur Startseite zurückgekehrt.
methods: {
//goBack()为点击响应事件，可在HTML部分设置 @tap="goBack()"
goBack(){
uni.navigateBack({
//关闭当前页面，返回上一页面或多级页面。
delta:1
});
}
}
reLaunch: Alle Seiten schließen und eine Seite in der Anwendung öffnen.
Schließen Sie alle Seiten und öffnen Sie eine Seite innerhalb der App. Beschreibung des OBJECT-Parameters: Der Parametertyp ist erforderlich, um anzugeben, dass urlString der Pfad der Seite in der Anwendung ist, die umgeleitet werden muss, und Parameter können nach dem Pfad hinzugefügt werden. Parameter und Pfade werden durch ? getrennt, Parameterschlüssel und Parameterwerte werden durch = verbunden und verschiedene Parameter werden durch & getrennt;
uni.reLaunch(
{
URL: 'test?id=1'
}
);
export default { onLoad: function (option) { console.log(option.query); } }
Rufen Sie ein Drittanbieterprogramm auf, um die angegebene URL openURL zu öffnen
methods: {
//goopenurl()为点击响应事件，可在HTML部分设置 @tap="goopenurl()"
goopenurl(){
boid plus.runtime.openURL('https://www.baidu.com/')
}
}
Übertragung und Empfang von Uniapp-Seitensprungwerten
Die allgemeine Routine zum Übergeben von Werten durch Springen besteht darin, den zu übergebenden Wert in die URL zu bringen und ihn dann mithilfe des Parameters in der onLoad-Funktion der empfangenen Seite wieder zu empfangen.
Wertseite:
uni.navigateTo({
url:'页面路径?id=1'
})
Empfangsseite:
onLoad:function(option) {//option为object类型，会序列化上个页面传递的参数
console.log(option.id);
//打印出上个页面传递的参数。传递的是id=1，则获取到的就是option.id
}
Die grundlegende Implementierung der Uniapp-Fallback-Aufrufmethode
Seiten in uniapp können über die Methoden uni.navigateTo, uni.redirectTo und uni.reLaunch umgeleitet werden. Bei diesen Seitensprüngen müssen wir häufig die Funktion des Seiten-Rollbacks implementieren, und uniapp bietet eine Fülle von Seiten-Rollback-Aufrufmethoden, die üblicherweise wie folgt verwendet werden:
- uni.navigateBack: Diese Methode wird verwendet, um die aktuelle Seite zu schließen und zur vorherigen Seite oder mehrstufigen Seite zurückzukehren. Die aufrufende Methode ist relativ einfach und muss nur einen ganzzahligen Parameter übergeben. Gibt die Anzahl der zurückgegebenen Ebenen an, zum Beispiel: uni.navigateBack(1) bedeutet, zur vorherigen Seite zurückzukehren, uni.navigateBack(2) bedeutet, zu den beiden vorherigen Seiten zurückzukehren, und so weiter. Es ist zu beachten, dass die Anzahl der zurückgegebenen Ebenen die Länge des aktuellen Seitenstapels nicht überschreiten darf, da sonst ein Fehler auftritt.
- uni.switchTab: Diese Methode wird verwendet, um zur TabBar-Seite zu springen und alle anderen Nicht-TabBar-Seiten zu schließen. Diese Methode muss einen Seitenpfadparameter übergeben, zum Beispiel: uni.switchTab({url:'/pages/tabBar/index'}).
- uni.reLaunch: Diese Methode wird verwendet, um alle Seiten zu schließen und eine bestimmte Seite zu öffnen. Diese Methode muss einen Seitenpfadparameter übergeben, zum Beispiel: uni.reLaunch({url:'/pages/home/index'}).
Es ist zu beachten, dass die oben genannten Methoden die Kernmethoden für die Handhabung des Seiten-Rollbacks in Uniapp sind und Entwickler bei ihrer Verwendung auf die Richtigkeit und Rationalität der Parameterübergabe achten müssen.
2. Einige Tipps zur uni.navigateBack-Methode
Die uni.navigateBack-Methode ist eine der gebräuchlichsten Methoden zum Implementieren des Uniapp-Seiten-Rollbacks. Ich glaube, dass viele Entwickler sie auch in der Praxis verwendet haben. Tatsächlich gibt es in der uni.navigateBack-Methode noch einige Details und Fähigkeiten, die unsere Aufmerksamkeit erfordern. Lass uns einen Blick darauf werfen:
- Verwendung mit der uni.onBackPress-Methode
In einigen Fällen müssen wir die Back-Operationen des Benutzers überwachen, um andere Geschäftsvorgänge ausführen zu können. Zu diesem Zeitpunkt können Sie die uni.onBackPress-Methode zur Überwachung verwenden. Dieser Methode muss eine Rückruffunktion übergeben werden, die ausgelöst wird, wenn der Benutzer auf die Zurück-Schaltfläche klickt. In dieser Rückruffunktion können wir Benutzeroperationen abfangen und verarbeiten.
- Rufen Sie die Methode uni.navigateBack in der untergeordneten Komponente auf
Wenn in uniapp Unterkomponenten Seitensprung- und Rollback-Vorgänge ausführen müssen, müssen sie über uni.navigateTo, uni.redirectTo und andere Methoden aufgerufen werden. In einigen Fällen müssen Unterkomponenten jedoch auch einen Seiten-Rollback-Vorgang durchführen. In diesem Fall kann die Methode uni.navigateBack verwendet werden. Um die Methode uni.navigateBack in einer Unterkomponente aufzurufen, müssen Sie die Methode uni.$emit zum Auslösen von Ereignissen verwenden. In einer untergeordneten Komponente können Sie beispielsweise Folgendes schreiben:
this.$emit('back');
In der übergeordneten Komponente müssen wir auf dieses Ereignis hören und beim Auslösen des Ereignisses die Methode uni.navigateBack aufrufen, um die Seite zurückzugeben.
<image @click="goback" class="familyReportarrow" src="/static/images/arrow.png" mode=""></image>
<script>
export default{ data(){ return{ } }, Methoden:{ goback(){ console.log(111); uni.navigateBack({ delta: 1 }) } } } </script>