Kaedah input tidak disertakan di bahagian bawah uniapp

Dengan populariti Internet mudah alih, semakin banyak aplikasi mula muncul. Cara menjadikan aplikasi lebih mudah digunakan dan lebih pantas juga merupakan salah satu masalah yang perlu diselesaikan oleh pembangun. Dalam banyak aplikasi, bar navigasi di bahagian bawah adalah komponen penting yang membantu pengguna bertukar dengan cepat antara halaman. Walau bagaimanapun, apabila menggunakan kaedah input pada peranti mudah alih, bar navigasi akan dikaburkan apabila kaedah input meningkat, yang bukan sahaja menjadikan pengalaman pengguna tidak selesa, tetapi juga menyebabkan masalah penggunaan tertentu.

Untuk menyelesaikan masalah ini, banyak pembangun menggunakan komponen kaedah input bawah rangka kerja uniapp. Fungsi komponen ini adalah untuk membenarkan bar navigasi di bahagian bawah halaman ditetapkan di bahagian paling bawah halaman dan tidak disekat apabila kaedah input meningkat. Dalam artikel ini, kami akan meneroka cara menggunakan komponen kaedah input bawah dalam uniapp.

1 Pasang pustaka komponen uni-ui

uni-ui ialah pustaka komponen berdasarkan rangka kerja uniapp Ia termasuk banyak komponen yang biasa digunakan, seperti kaedah input, butang, borang, Navigasi, senarai, dsb. Gunakan uni-ui untuk membina aplikasi uniapp berkualiti tinggi dengan cepat. Pertama, kita perlu memasang perpustakaan komponen uni-ui dalam projek uniapp. Dalam direktori akar projek uni-app, jalankan arahan berikut:

npm install uni-ui -S

Arahan ini akan memuat turun dan memasang pustaka komponen uni-ui secara automatik ke direktori projek.

2. Gunakan komponen kaedah input bebas bawah

Selepas memasang perpustakaan komponen uni-ui, kami boleh menggunakan komponen kaedah input bebas bawah pada halaman. Tambahkan kod berikut dalam teg templat halaman:

<template>
  <view>
    <!-- 页面内容区域 -->
  </view>
  <uni-tab-bar not-safe-area fixed>
    <uni-tab-bar-item
      title="首页"
      icon="uni-icons-home"
      url="/pages/home/home"
    ></uni-tab-bar-item>
    <uni-tab-bar-item
      title="消息"
      icon="uni-icons-comment"
      url="/pages/message/message"
    ></uni-tab-bar-item>
    <uni-tab-bar-item
      title="我的"
      icon="uni-icons-person"
      url="/pages/user/user"
    ></uni-tab-bar-item>
  </uni-tab-bar>
</template>

Dalam halaman ini, kami menggunakan komponen uni-tab-bar untuk mencapai kesan tidak mengikut kaedah input di bahagian bawah. Komponen uni-tab-bar mengandungi berbilang komponen uni-tab-bar-item, setiap komponen uni-tab-bar-item mewakili butang bar navigasi bawah. Apabila menggunakan komponen uni-tab-bar, kita perlu menambah kawasan tidak selamat dan atribut tetap padanya untuk mencapai kesan tidak mengikut kaedah input di bahagian bawah.

Dalam komponen unit-tab-bar-item, kita boleh menetapkan tajuk, ikon dan atribut url untuk mewakili teks, ikon dan pautan lompat butang. Dalam contoh ini, kami menyediakan tiga butang untuk melompat ke halaman utama, mesej dan halaman saya masing-masing.

3 Untuk mencapai kesan tidak mengikut komponen kaedah input di bahagian bawah

Selepas menambah komponen bar-tab-uni pada halaman, kita juga perlu menetapkan beberapa atribut dalam gaya untuk mencapai kesan tidak mengikut komponen kaedah input di bahagian bawah. Tambahkan kod berikut pada teg gaya halaman:

<style>
  /* 页面内容区域 */
  view {
    height: 100%;
    padding-bottom: 144rpx; /* 底部导航栏高度 */
    box-sizing: border-box;
  }
  /* 底部导航栏 */
  uni-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #ebedf0;
  }
</style>

Dalam gaya ini, kami menambah atribut padding-bottom pada kawasan kandungan halaman untuk meninggalkan ketinggian bar navigasi bawah. Pada masa yang sama, kami juga menetapkan sifat komponen uni-tab-bar untuk membetulkannya di bahagian bawah halaman. Melakukan ini memastikan bar navigasi bahagian bawah daripada dikaburkan dan mengekalkan kedudukannya di bahagian bawah halaman.

4. Ringkasan

Apabila menggunakan rangka kerja uniapp untuk membangunkan aplikasi, komponen kaedah input bawah adalah komponen yang sangat praktikal. Ia boleh membantu kami menyelesaikan masalah bar navigasi bawah disekat oleh kaedah input, menjadikan pengalaman pengguna lebih selesa. Dalam artikel ini, kami memperkenalkan cara menggunakan komponen kaedah input bawah dalam uniapp dan merealisasikan kesan komponen ini. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Kaedah input tidak disertakan di bahagian bawah uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!