Bagaimana untuk menetapkan butang belakang dalam bar tajuk asli uniapp

Seperti yang kita sedia maklum, uniapp ialah rangka kerja bahagian hadapan berbilang platform yang ditulis sekali. Apabila menggunakan uniapp untuk membangunkan APP mudah alih, kami selalunya perlu menambah bar tajuk dan butang kembali. uniapp menyediakan bar tajuk bersatu dan butang kembali secara lalai, tetapi dalam pembangunan sebenar, kita selalunya perlu memperibadikan bar tajuk dan butang kembali. Artikel ini akan memperkenalkan cara untuk menetapkan butang belakang dalam bar tajuk asli uniapp.

1. bar tajuk asli uniapp dan butang kembali

Dalam uniapp, anda boleh menetapkan tajuk halaman dengan mengkonfigurasi "navigationBarTitleText" halaman. Pada masa yang sama, dalam penghalaan halaman, anda boleh menggunakan "navigationBarBackgroundColor", "navigationBarTextStyle" dan sifat lain untuk menetapkan warna latar belakang dan warna latar depan bar tajuk.

Bar tajuk asli Uniapp akan menjana butang kembali secara automatik dan memaparkan anak panah serta teks yang sepadan pada butang kembali berdasarkan hubungan kedalaman penghalaan halaman.

2. Pemperibadian butang pulang asli uniapp

Jika kami ingin memperibadikan butang kembali, seperti mengubah suai teks dan gaya butang, kami perlu melakukan beberapa pemprosesan khas.

uniapp menyediakan dua API, "onNavigationBarButtonTap" dan "setNavigationBarTitle", yang boleh memperibadikan butang kembali. Kami boleh menggunakan kedua-dua API ini dalam kaedah kitaran hayat halaman untuk memperibadikan butang belakang.

1. Ubah suai teks butang kembali

Dengan memanggil API "onNavigationBarButtonTap", kami boleh menangkap peristiwa klik butang kembali dan menetapkan teks pulangan butang dalam kaedah pengendalian acara .

Tambahkan kod berikut dalam kaedah "onLoad" halaman:

onLoad: function() {
  uni.showNavigationBarLoading()
  uni.onNavigationBarButtonTap(function(res) {
    console.log(res) // res.index 表示点击的按钮的索引，2 表示返回
  })
}

Dalam kaedah pengendalian acara, kami boleh mengubah suai teks butang belakang dengan memanggil API "setNavigationBarTitle".

uni.setNavigationBarTitle({
    title: '自定义标题'
})

Selepas tetapan selesai, teks butang kembali akan menjadi "Tajuk tersuai".

2. Ubah suai gaya butang kembali

Jika kita ingin mengubah suai gaya butang kembali, seperti menetapkan ikon, warna dan saiz butang kembali , kita perlu menggunakan helaian gaya CSS.

Dalam lembaran gaya CSS, kita boleh menggayakan butang belakang dengan cara berikut:

/* 修改返回按钮的图标 */
.page-navigation-bar .uni-icon-back {
  background-image: url(images/back.png);
}

/* 修改返回按钮的颜色 */
.page-navigation-bar .uni-tabbar-item-active {
  color: #007aff;
}

/* 修改返回按钮的大小 */
.page-navigation-bar .uni-tabbar-item-active {
  font-size: 30rpx;
}

3. Sembunyikan/Tunjukkan butang belakang

Jika Jika kita ingin menyembunyikan butang belakang dalam beberapa halaman, kita perlu menggunakan API "setNavigationBar". Melalui API ini, kita boleh menetapkan tajuk utama, sari kata dan sama ada untuk memaparkan butang belakang.

// 隐藏返回按钮
uni.setNavigationBar({
    title: '自定义主标题',
    backgroundColor: '#fff',
    hideBackButton: true
})

// 显示返回按钮
uni.setNavigationBar({
    title: '自定义主标题',
    backgroundColor: '#fff',
    hideBackButton: false
})

Di atas ialah tetapan diperibadikan untuk butang kembali bar tajuk asli uniapp. Melalui panggilan API mudah dan tetapan helaian gaya CSS, kami boleh mengubah suai teks, gaya dan keadaan paparan butang kembali dengan mudah untuk mencapai kesan bar tajuk yang unik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan butang belakang dalam bar tajuk asli uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!