Cara mengubah suai tajuk uniapp secara dinamik

Uniapp ialah alat pembangunan merentas platform berdasarkan rangka kerja Vue.js Ia boleh menyusun projek ke dalam aplikasi untuk berbilang platform pada satu masa, dan juga menyediakan beberapa ciri unik, seperti mengubah suai tajuk secara dinamik.

Dalam Uniapp, kita boleh melaksanakan fungsi mengubahsuai tajuk secara dinamik Kaedah khusus adalah seperti berikut:

Pertama, dalam komponen Vue, kita boleh menggunakan fungsi yang dipasang untuk mendapatkan. contoh halaman semasa, dan kemudian gunakan atribut $refs untuk mendapatkan komponen tajuk dalam komponen kepala, dan kemudian kita boleh menggunakan objek ini.$refs.title untuk mengubah suai tajuk. Kod sampel adalah seperti berikut:

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

Dengan cara ini, kami boleh mengubah suai tajuk secara dinamik selepas pemaparan halaman selesai.

Sudah tentu, jika kita perlu mengubah suai tajuk secara dinamik dalam berbilang halaman, kita boleh merangkum kod di atas ke dalam kaedah awam dan memanggilnya dalam halaman di mana tajuk itu perlu diubah suai. Kod sampel adalah seperti berikut:

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

Selain kaedah di atas, kami juga boleh menggunakan konfigurasi global yang disediakan oleh uni-app untuk mengubah suai tajuk secara dinamik. Kita hanya perlu menambah atribut manifest.json di bawah nod pages dalam style, dan kemudian gunakan kaedah uni.setNavigationBarTitle() dalam halaman yang sepadan untuk mengubah suai tajuk. Kod sampel adalah seperti berikut:

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

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

Ringkasnya, kita dapat melihat bahawa dalam Uniapp, mengubah suai tajuk secara dinamik adalah sangat mudah Kita boleh mengubah suainya secara langsung menggunakan sifat dalam komponen, atau gunakan konfigurasi global Untuk mencapai ini, anda perlu memilih kaedah yang sesuai mengikut situasi tertentu.

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