ikon bar navigasi atas uniapp menukar kedudukan

Dengan perkembangan pesat Internet mudah alih, semakin ramai pembangun menyelidik dan menggunakan alatan pembangunan merentas platform. Sebagai alat pembangunan merentas platform, kemudahan penggunaan Uniapp yang berkuasa dan prestasi cemerlang telah diiktiraf dan dicari oleh banyak pembangun dan perusahaan. Walau bagaimanapun, dalam proses membangunkan menggunakan Uniapp, anda juga akan menghadapi beberapa masalah dan kesukaran, seperti perubahan kedudukan ikon bar navigasi atas.

Bar navigasi teratas Uniapp dipaparkan di bahagian atas skrin secara lalai, dan ikon dalam bar navigasi turut dipaparkan di sebelah kiri skrin secara lalai. Tetapi dalam proses pembangunan sebenar, kadangkala kita perlu melaraskan kedudukan ikon dalam bar navigasi, seperti memaparkan ikon di sebelah kanan skrin atau di tengah. Jadi bagaimana untuk menanganinya? Izinkan saya berkongsi bagaimana saya menangani masalah ini dalam pembangunan sebenar.

Langkah pertama: Ubah suai gaya bar navigasi

{
  "navigationBarTitleText": "页面标题",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}

Dalam Uniapp, kita boleh menukar kedudukan ikon bar navigasi atas dengan mengubah suai gaya bar navigasi. Mula-mula kita perlu menukar nilai navigationBarTextStyle kepada white supaya teks dalam bar navigasi akan menjadi putih dan sebati dengan warna latar belakang bar navigasi. Kemudian kami menambah kod berikut dalam pages.json:

"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle": "custom",

navigationBarTextStyle dan navigationBarBackgroundColor di sini adalah untuk memastikan ketekalan gaya bar navigasi Nilai navigationStyle ialah custom, iaitu adalah untuk Bar navigasi menjadi gaya tersuai, supaya kita bebas mengubah suai susun atur dan gaya bar navigasi dalam kod.

Langkah 2: Tetapkan kandungan bar navigasi

<view class="navigationBar">
  <view class="navigationBar-content">
    <view class="navigation-item" @click="goBack">
      <image src="/static/back.png" />
    </view>
    <view class="navigation-title">
      页面标题
    </view>
    <view class="navigation-item" @click="goHome">
      <image src="/static/home.png" />
    </view>
  </view>
</view>

Kita perlu menambah bar navigasi tersuai pada halaman, dan kemudian tambah ikon dalam navigation-item. Apabila ikon diklik, kita boleh kembali atau pergi ke halaman utama melalui kaedah pengikatan.

Langkah 3: Tetapkan gaya bar navigasi

.navigationBar {
  width: 100%;
  height: 44px;
  background-color: #ffffff;
  padding-top: 20px;
  box-sizing: border-box;
}

.navigationBar-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navigation-item {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation-title {
  font-size: 16px;
  font-weight: bold;
}

Akhir sekali kita perlu menetapkan gaya bar navigasi tersuai dalam fail css, termasuk navigationBar, navigationBar-content dan navigation-item Lebar, tinggi, penjajaran, dsb.

Melalui langkah di atas, kami boleh mengubah suai kedudukan ikon bar navigasi di bahagian atas Uniapp untuk mencapai kesan menyesuaikan bar navigasi. Pada masa yang sama, kaedah ini juga boleh digunakan pada senario lain yang memerlukan penyesuaian bar navigasi, seperti menambah kotak carian atau kotak lungsur turun bar navigasi.

Ringkasnya, Uniapp, sebagai alat pembangunan merentas platform, telah digemari oleh banyak pembangun kerana kemudahan penggunaannya yang berkuasa dan prestasi cemerlang. Semasa penggunaan, kita harus pandai meneroka dan berinovasi, dan berkongsi dan berkomunikasi secara aktif untuk bersama-sama mempromosikan pembangunan Internet mudah alih.

Atas ialah kandungan terperinci ikon bar navigasi atas uniapp menukar kedudukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!