uniapp secara dinamik menetapkan nama tajuk

Apabila membangun menggunakan uniapp, kami sering menghadapi situasi di mana kami perlu menetapkan tajuk halaman web secara dinamik. Sebagai contoh, apabila membangunkan aplikasi mudah alih, kami mungkin perlu mempunyai tajuk halaman memaparkan nama modul yang sedang kami gunakan atau nama kandungan yang sedang kami semak imbas Dalam kes ini, kami perlu menetapkan halaman web secara dinamik tajuk.

Dalam uniapp, kami boleh menetapkan nama tajuk halaman secara dinamik dengan menukar fail konfigurasi global. Di bawah ini saya akan menerangkan secara terperinci bagaimana untuk melaksanakannya.

1. Lakukan konfigurasi global dalam fail main.js

Dalam uniapp, kami biasanya melakukan konfigurasi global dalam fail main.js. Oleh kerana fail ini ialah fail kemasukan untuk keseluruhan program, kami boleh melakukan beberapa operasi konfigurasi global di sini.

Apabila kami perlu menetapkan nama tajuk halaman web, kami boleh menambah kod berikut pada fail 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();

Dalam kod di atas, kami menentukan kaedah prototaip Vue $setTitle( ), menggunakan Digunakan untuk menetapkan nama tajuk halaman web secara dinamik. Kaedah ini memanggil kaedah uni.setNavigationBarTitle(), yang boleh menetapkan nama tajuk halaman.

Perlu diambil perhatian bahawa apabila menetapkan nama tajuk, kita boleh memasukkan tajuk parameter nama tajuk, atau kita tidak boleh memasukkan parameter Jika tiada parameter dimasukkan, nama tajuk akan ditetapkan kepada aksara kosong secara lalai.

2. Panggil kaedah $setTitle() dalam komponen halaman

Panggil kaedah $setTitle() dalam komponen halaman untuk menetapkan nama tajuk halaman web secara dinamik. Mari gunakan kod sampel untuk menerangkan:

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

Dalam kod di atas, kami mentakrifkan komponen halaman bernama Index, yang mentakrifkan atribut tajuk dengan nilai awal "Halaman Utama" dalam data() data . Dalam kitaran hayat onReady(), kami memanggil kaedah $setTitle() untuk menetapkan tajuk halaman web.

Perlu diambil perhatian bahawa dalam komponen halaman yang berbeza, kita perlu memanggil kaedah $setTitle() secara berbeza. Oleh itu, dalam proses pembangunan sebenar, kita perlu menggunakan kaedah $setTitle() secara fleksibel untuk menetapkan tajuk halaman.

Ringkasnya, dengan menambahkan kaedah prototaip $setTitle() pada Vue dan memanggilnya secara munasabah dalam komponen halaman, kita boleh merealisasikan tetapan dinamik nama tajuk halaman web dalam uniapp.

Atas ialah kandungan terperinci uniapp secara dinamik menetapkan nama tajuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!