uniapp définit dynamiquement le nom du titre

Lors du développement à l'aide d'uniapp, nous rencontrons souvent des situations où nous devons définir dynamiquement le titre de la page Web. Par exemple, lors du développement d'une application mobile, nous pouvons avoir besoin que le titre de la page affiche le nom du module dans lequel nous nous trouvons actuellement ou le nom du contenu que nous parcourons actuellement. Dans ce cas, nous devons définir dynamiquement la page Web. titre.

Dans uniapp, nous pouvons obtenir l'effet de définir dynamiquement le nom du titre de la page en modifiant le fichier de configuration global. Ci-dessous, j'expliquerai en détail comment le mettre en œuvre.

1. Effectuer une configuration globale dans le fichier main.js

Dans uniapp, nous effectuons généralement une configuration globale dans le fichier main.js. Étant donné que ce fichier est le fichier d'entrée de l'ensemble du programme, nous pouvons effectuer ici certaines opérations de configuration globale.

Lorsque nous devons définir le nom du titre de la page Web, nous pouvons ajouter le code suivant dans le fichier main.js :

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();

Dans le code ci-dessus, nous définissons une méthode prototype Vue $setTitle(), qui est utilisée pour définir dynamiquement le nom du titre de la page Web fonctionne. Cette méthode appelle la méthode uni.setNavigationBarTitle(), qui peut définir le nom du titre de la page.

Il convient de noter que lors de la définition du nom du titre, nous pouvons transmettre un paramètre de nom de titre, ou nous ne pouvons pas transmettre le paramètre si aucun paramètre n'est transmis, le nom du titre sera défini sur une chaîne vide par. défaut.

2. Appelez la méthode $setTitle() dans le composant de page

Appelez la méthode $setTitle() dans le composant de page pour définir dynamiquement le nom du titre de la page Web. Utilisons un exemple de code pour expliquer :

<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>

Dans le code ci-dessus, nous définissons un composant de page nommé Index, qui définit un attribut de titre avec une valeur initiale de "Home Page" dans les données data(). Dans le cycle de vie onReady(), nous appelons la méthode $setTitle() pour définir le titre de la page Web.

Il convient de noter que dans différents composants de page, nous devons appeler la méthode $setTitle() différemment. Par conséquent, dans le processus de développement actuel, nous devons utiliser de manière flexible la méthode $setTitle() pour définir le titre de la page.

Pour résumer, en ajoutant la méthode prototype $setTitle() à Vue et en l'appelant raisonnablement dans le composant de page, nous pouvons réaliser le réglage dynamique du nom du titre de la page Web dans uniapp.

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!