uniappのタイトルを動的に変更する方法

Uniapp は、Vue.js フレームワークに基づくクロスプラットフォーム開発ツールです。プロジェクトを一度に複数のプラットフォーム用のアプリケーションにコンパイルできます。また、タイトルの動的変更など、いくつかのユニークな機能も提供します。

Uniapp では、タイトルを動的に変更する機能を簡単に実装できます 具体的な方法は次のとおりです:

まず、Vue コンポーネントで、マウントされた関数を使用して、現在のページ インスタンスを取得し、$refs 属性を使用して head コンポーネントのタイトル コンポーネントを取得します。その後、this.$refs.title オブジェクトを使用してタイトルを変更できます。サンプル コードは次のとおりです。

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

この方法で、ページのレンダリングが完了した後にタイトルを動的に変更できます。

もちろん、複数のページでタイトルを動的に変更する必要がある場合は、上記のコードをパブリック メソッドにカプセル化し、タイトルを変更する必要があるページでそれを呼び出すことができます。サンプル コードは次のとおりです。

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

上記の方法に加えて、uni-app が提供するグローバル設定を使用してタイトルを動的に変更することもできます。 manifest.json の pages ノードの下に style 属性を追加し、対応する中で uni.setNavigationBarTitle()# を使用するだけです。 page ##タイトルを変更する方法。サンプル コードは次のとおりです:

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

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

要約すると、Uniapp ではタイトルを動的に変更するのが非常に簡単であることがわかります。コンポーネントのプロパティを使用して直接変更することも、次のこともできます。それを実現するにはグローバル設定を使用しますが、特定の状況に応じて適切な方法を選択する必要があります。

以上がuniappのタイトルを動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。