uniapp legt den Titelnamen dynamisch fest

Bei der Entwicklung mit Uniapp stoßen wir häufig auf Situationen, in denen wir den Titel der Webseite dynamisch festlegen müssen. Wenn wir beispielsweise eine mobile App entwickeln, muss der Seitentitel möglicherweise den Namen des Moduls anzeigen, in dem wir uns gerade befinden, oder den Namen des Inhalts, den wir gerade durchsuchen. In diesem Fall müssen wir die Webseite dynamisch festlegen Titel.

In Uniapp können wir den Effekt der dynamischen Festlegung des Seitentitelnamens erzielen, indem wir die globale Konfigurationsdatei ändern. Im Folgenden erkläre ich im Detail, wie man es umsetzt.

1. Globale Konfiguration in der Datei main.js durchführen

In Uniapp führen wir im Allgemeinen eine globale Konfiguration in der Datei main.js durch. Da es sich bei dieser Datei um die Eintragsdatei für das gesamte Programm handelt, können wir hier einige globale Konfigurationsvorgänge durchführen.

Wenn wir den Titelnamen der Webseite festlegen müssen, können wir den folgenden Code in die Datei main.js einfügen:

import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

// 设置页面标题名称
Vue.prototype.$setTitle = function (title) {
  uni.setNavigationBarTitle({
    title: title || ''
  });
};

App.mpType = 'app';

const app = new Vue({
  ...App
});

app.$mount();

Im obigen Code definieren wir eine Vue-Prototypmethode $setTitle(), die zum dynamischen Festlegen verwendet wird Der Titelname der Webseite funktioniert. Diese Methode ruft die Methode uni.setNavigationBarTitle() auf, die den Titelnamen der Seite festlegen kann.

Es ist zu beachten, dass wir beim Festlegen des Titelnamens einen Titelnamensparameter übergeben können, oder wir können den Parameter nicht übergeben, wenn kein Parameter übergeben wird, wird der Titelname auf eine leere Zeichenfolge gesetzt Standard.

2. Rufen Sie die Methode $setTitle() in der Seitenkomponente auf.

Rufen Sie die Methode $setTitle() in der Seitenkomponente auf, um den Titelnamen der Webseite dynamisch festzulegen. Lassen Sie uns einen Beispielcode zur Erklärung verwenden:

<template>
  <view class="index">
    <view class="content">
      <text class="title">{{ title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      title: '首页'
    };
  },
  onReady() {
    this.$setTitle(this.title);
  },
  methods: {
    ...
  }
};
</script>

Im obigen Code definieren wir eine Seitenkomponente namens Index, in der in den data()-Daten ein Titelattribut mit dem Anfangswert „Home Page“ definiert ist. Im Lebenszyklus von onReady() rufen wir die Methode $setTitle() auf, um den Titel der Webseite festzulegen.

Es ist zu beachten, dass wir in verschiedenen Seitenkomponenten die Methode $setTitle() unterschiedlich aufrufen müssen. Daher müssen wir im eigentlichen Entwicklungsprozess die Methode $setTitle() flexibel verwenden, um den Seitentitel festzulegen.

Zusammenfassend lässt sich sagen, dass wir die dynamische Einstellung des Webseitentitelnamens in Uniapp realisieren können, indem wir die Prototypmethode $setTitle() zu Vue hinzufügen und sie sinnvoll in der Seitenkomponente aufrufen.

Das obige ist der detaillierte Inhalt vonuniapp legt den Titelnamen dynamisch fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!