Comment modifier dynamiquement le titre d'uniapp

Uniapp est un outil de développement multiplateforme basé sur le framework Vue.js. Il peut compiler un projet en applications pour plusieurs plates-formes à la fois et fournit également des fonctionnalités uniques, telles que la modification dynamique des titres.

Dans Uniapp, nous pouvons facilement implémenter la fonction de modification dynamique du titre. La méthode spécifique est la suivante :

Tout d'abord, dans le composant Vue, nous pouvons utiliser la fonction montée pour obtenir l'instance de page actuelle, puis utiliser le Attribut $refs pour obtenir le composant titre dans le composant head, puis nous pouvons utiliser l'objet this.$refs.title pour modifier le titre. L'exemple de code est le suivant :

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

De cette façon, nous pouvons modifier dynamiquement le titre une fois le rendu de la page terminé.

Bien sûr, si nous devons modifier dynamiquement le titre sur plusieurs pages, nous pouvons encapsuler le code ci-dessus dans une méthode publique et l'appeler dans la page où le titre doit être modifié. L'exemple de code est le suivant :

//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('新标题');
  }
}

En plus des méthodes ci-dessus, nous pouvons également utiliser la configuration globale fournie par uni-app pour modifier dynamiquement le titre. Il suffit de modifier le titre dans la méthode manifest.json中的pages节点下添加style属性，然后在对应的页面中使用uni.setNavigationBarTitle(). L'exemple de code est le suivant :

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

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

Pour résumer, on voit que dans Uniapp, modifier dynamiquement le titre est très simple On peut soit utiliser les propriétés du composant pour le modifier directement, soit on peut utiliser la configuration globale. méthode pour y parvenir. Elle doit être basée sur la méthode spécifique. Choisissez la méthode appropriée à la situation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!