So ändern Sie den Titel von Uniapp dynamisch

Uniapp ist ein plattformübergreifendes Entwicklungstool, das auf dem Vue.js-Framework basiert. Es kann ein Projekt gleichzeitig in Anwendungen für mehrere Plattformen kompilieren und bietet außerdem einige einzigartige Funktionen, wie z. B. die dynamische Änderung von Titeln.

In Uniapp können wir die Funktion zum dynamischen Ändern des Titels einfach implementieren. Die spezifische Methode lautet wie folgt:

Zuerst können wir in der Vue-Komponente die gemountete Funktion verwenden, um die aktuelle Seiteninstanz abzurufen, und dann die verwenden Das $refs-Attribut ruft die Titelkomponente in der Kopfkomponente ab, und dann können wir dieses.$refs.title-Objekt verwenden, um den Titel zu ändern. Der Beispielcode lautet wie folgt:

mounted() {
  //获取页面实例
  const page = this.$mp.page;
  //获取标题组件
  const title = page.$refs.title;
  //动态修改标题
  title.text = '新标题';
}

Auf diese Weise können wir den Titel dynamisch ändern, nachdem das Rendern der Seite abgeschlossen ist.

Wenn wir den Titel auf mehreren Seiten dynamisch ändern müssen, können wir natürlich den obigen Code in eine öffentliche Methode kapseln und ihn auf der Seite aufrufen, auf der der Titel geändert werden muss. Der Beispielcode lautet wie folgt:

//utils.js
export default {
  setTitle(text) {
    const page = uni.$mp.page;
    const title = page.$refs.title;
    title.text = text;
  }
}

//使用
import utils from '@/utils';

export default {
  mounted() {
    utils.setTitle('新标题');
  }
}

Zusätzlich zu den oben genannten Methoden können wir auch die von uni-app bereitgestellte globale Konfiguration verwenden, um den Titel dynamisch zu ändern. Wir müssen nur den Titel in der manifest.json中的pages节点下添加style属性，然后在对应的页面中使用uni.setNavigationBarTitle()-Methode ändern. Der Beispielcode lautet wie folgt:

//manifest.json
"pages": [
  {
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "首页"
    }
  }
]

//使用
export default {
  mounted() {
    uni.setNavigationBarTitle({
      title: '新标题'
    })
  }
}

Zusammenfassend können wir sehen, dass das dynamische Ändern des Titels in Uniapp sehr einfach ist. Wir können entweder die Eigenschaften in der Komponente verwenden, um ihn direkt zu ändern, oder wir können die globale Konfiguration verwenden Methode, um dies zu erreichen. Es muss auf der spezifischen Situation basieren. Wählen Sie die geeignete Methode.

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Titel von Uniapp dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!