How to dynamically modify the title of uniapp

Uniapp is a cross-platform development tool based on the Vue.js framework. It can compile a project into applications for multiple platforms at one time. It also provides some unique features, such as dynamically modifying titles.

In Uniapp, we can easily implement the function of dynamically modifying the title. The specific method is as follows:

First, in the Vue component, we can use the mounted function to get the current page instance, and then use the $refs attribute to get the title component in the head component, and then we can use this.$refs.title object to modify the title. The sample code is as follows:

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

In this way, we can dynamically modify the title after the page rendering is completed.

Of course, if we need to dynamically modify the title in multiple pages, we can encapsulate the above code into a public method and call it in the page where the title needs to be modified. The sample code is as follows:

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

In addition to the above methods, we can also use the global configuration provided by uni-app to dynamically modify the title. We only need to add the style attribute under the pages node in manifest.json, and then use uni.setNavigationBarTitle()# in the corresponding page ##Method to modify the title. The sample code is as follows:

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

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

To sum up, we can see that in Uniapp, dynamically modifying the title is very simple. We can either use the properties in the component to modify it directly, or we can use global configuration to achieve it. , you need to choose the appropriate method according to the specific situation.

The above is the detailed content of How to dynamically modify the title of uniapp. For more information, please follow other related articles on the PHP Chinese website!