So legen Sie die Zurück-Schaltfläche in der nativen Titelleiste von Uniapp fest

Wie wir alle wissen, ist Uniapp ein plattformübergreifendes Multi-End-Front-End-Framework, das einmal geschrieben wurde. Wenn wir uniapp zur Entwicklung mobiler Apps verwenden, müssen wir häufig Titelleisten und Zurück-Schaltflächen hinzufügen. Uniapp bietet standardmäßig eine einheitliche Titelleiste und Zurück-Schaltfläche. In der tatsächlichen Entwicklung müssen wir jedoch häufig die Titelleiste und die Zurück-Schaltfläche personalisieren. In diesem Artikel erfahren Sie, wie Sie die Zurück-Schaltfläche in der nativen Titelleiste von Uniapp festlegen.

1. Native Uniapp-Titelleiste und Zurück-Schaltfläche

In Uniapp können Sie den Seitentitel festlegen, indem Sie den „navigationBarTitleText“ der Seite konfigurieren. Gleichzeitig können Sie beim Seitenrouting „navigationBarBackgroundColor“, „navigationBarTextStyle“ und andere Eigenschaften verwenden, um die Hintergrundfarbe und die Vordergrundfarbe der Titelleiste festzulegen.

Die native Titelleiste von Uniapp generiert automatisch eine Zurück-Schaltfläche und zeigt den entsprechenden Pfeil und Text auf der Zurück-Schaltfläche basierend auf der Tiefenbeziehung der Seitenführung an.

2. Personalisierung der nativen Zurück-Schaltfläche von Uniapp

Wenn wir die Zurück-Schaltfläche personalisieren möchten, z. B. den Text und den Stil der Schaltfläche ändern, müssen wir eine spezielle Verarbeitung durchführen.

uniapp bietet zwei APIs, „onNavigationBarButtonTap“ und „setNavigationBarTitle“, mit denen die Zurück-Schaltfläche personalisiert werden kann. Wir können diese beiden APIs in der Lebenszyklusmethode der Seite verwenden, um die Zurück-Schaltfläche zu personalisieren.

1. Ändern Sie den Text der Zurück-Schaltfläche

Durch Aufrufen der API „onNavigationBarButtonTap“ können wir das Klickereignis der Zurück-Schaltfläche erfassen und den Text der Zurück-Schaltfläche in der Ereignisbehandlungsmethode festlegen.

Fügen Sie den folgenden Code in der „onLoad“-Methode der Seite hinzu:

onLoad: function() {
  uni.showNavigationBarLoading()
  uni.onNavigationBarButtonTap(function(res) {
    console.log(res) // res.index 表示点击的按钮的索引，2 表示返回
  })
}

In der Ereignisbehandlungsmethode können wir den Text der Zurück-Schaltfläche ändern, indem wir die API „setNavigationBarTitle“ aufrufen.

uni.setNavigationBarTitle({
    title: '自定义标题'
})

Nach der Einrichtung wird der Text der Zurück-Schaltfläche zu „Benutzerdefinierter Titel“.

2. Ändern Sie den Stil der Zurück-Schaltfläche

Wenn wir den Stil der Zurück-Schaltfläche ändern möchten, z. B. das Symbol, die Farbe und die Größe der Zurück-Schaltfläche festlegen, müssen wir ein CSS-Stylesheet verwenden.

Im CSS-Stylesheet können wir den Stil der Zurück-Schaltfläche auf folgende Weise festlegen:

/* 修改返回按钮的图标 */
.page-navigation-bar .uni-icon-back {
  background-image: url(images/back.png);
}

/* 修改返回按钮的颜色 */
.page-navigation-bar .uni-tabbar-item-active {
  color: #007aff;
}

/* 修改返回按钮的大小 */
.page-navigation-bar .uni-tabbar-item-active {
  font-size: 30rpx;
}

3. Die Zurück-Schaltfläche ein-/ausblenden

Wenn wir die Zurück-Schaltfläche auf einigen Seiten ausblenden möchten, müssen wir dies tun Verwenden Sie die API „setNavigationBar“. Über diese API können wir den Haupttitel und den Untertitel festlegen und festlegen, ob die Zurück-Schaltfläche angezeigt werden soll.

// 隐藏返回按钮
uni.setNavigationBar({
    title: '自定义主标题',
    backgroundColor: '#fff',
    hideBackButton: true
})

// 显示返回按钮
uni.setNavigationBar({
    title: '自定义主标题',
    backgroundColor: '#fff',
    hideBackButton: false
})

Das Obige ist die personalisierte Einstellung der Zurück-Schaltfläche der nativen Titelleiste von Uniapp. Durch einfache API-Aufrufe und CSS-Stylesheet-Einstellungen können wir den Text, den Stil und den Anzeigestatus der Zurück-Schaltfläche problemlos ändern, um einen optisch einzigartigen Titelleisteneffekt zu erzielen.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Zurück-Schaltfläche in der nativen Titelleiste von Uniapp fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!