Cara berkongsi menu bawah dalam uniapp

Dengan perkembangan pesat peranti mudah alih, semakin ramai pembangun mula menggunakan uniapp untuk pembangunan merentas platform. Dalam aplikasi mudah alih, menu bawah adalah komponen UI yang sangat biasa Berbeza daripada perbezaan antara iOS dan Android, menggunakan uniapp boleh mencapai interaksi dan gaya menu bawah yang konsisten pada platform yang berbeza, tetapi bagaimana untuk berkongsi menu bawah? Artikel ini akan memperkenalkan secara terperinci cara uniapp melaksanakan menu bawah biasa.

1. Menggunakan komponen menu bawah

uniapp menyediakan uni-tabbar komponen menu bawah rasmi, yang boleh dirujuk dalam fail page.json apabila digunakan. Komponen menu bawah boleh merealisasikan lompatan halaman dengan mengkonfigurasi atribut halaman uni-tabbar. Perlu diingatkan bahawa komponen menu bawah hanya menyokong konfigurasi empat halaman tab, dan setiap halaman mesti dibalut dengan tag halaman.

Contohnya adalah seperti berikut:

{
  "tabBar": {
    "color":"#999",
    "selectedColor":"#007aff",
    "borderStyle":"black",
    "backgroundColor":"#f9f9f9",
    "list":[{
      "pagePath":"pages/home/index",
      "text":"首页",
      "iconPath":"/static/tabbar/home.png",
      "selectedIconPath":"/static/tabbar/home_active.png"
    },{
      "pagePath":"pages/category/index",
      "text":"分类",
      "iconPath":"/static/tabbar/category.png",
      "selectedIconPath":"/static/tabbar/category_active.png"
    },{
      "pagePath":"pages/cart/index",
      "text":"购物车",
      "iconPath":"/static/tabbar/cart.png",
      "selectedIconPath":"/static/tabbar/cart_active.png"
    },{
      "pagePath":"pages/user/index",
      "text":"我的",
      "iconPath":"/static/tabbar/user.png",
      "selectedIconPath":"/static/tabbar/user_active.png"
    }]
  }
}

Apabila menggunakan komponen menu bawah, pembangun hanya perlu mengkonfigurasi atribut tabBar yang sepadan dalam fail page.json bagi setiap halaman perlu Konfigurasikan dalam fail page.json setiap halaman Kaedah ini menyusahkan dan tidak sesuai untuk berkongsi menu bawah.

2. Enkapsulasi komponen menu bawah

Sesetengah pembangun akan memilih untuk merangkum sendiri komponen menu bawah, seperti merangkum menu bawah dalam bentuk komponen Apabila menu bawah diperlukan diperkenalkan dalam halaman. Walaupun kaedah ini lebih mudah, terdapat juga beberapa kerja remeh yang perlu dilakukan untuk merangkum komponen menu bawah dalam uniapp.

Pertama sekali, dalam komponen menu bawah, anda perlu menggunakan kaedah uni.getSystemInfoSync() uni-api asli untuk mendapatkan ketinggian skrin peranti dan ketinggian menu bawah, untuk mengira ketinggian halaman tidak termasuk menu bawah. Kedua, ketinggian menu bawah yang sepadan dan ketinggian halaman perlu ditetapkan secara manual dalam setiap halaman supaya penatalan halaman biasa boleh dicapai.

Kod sampel adalah seperti berikut:

<template>
  <view class="wrapper">
    <slot></slot>
    <view class="tabbar" :style="{ height: tabBarHeight + 'px' }">
      <!-- 底部菜单内容 -->
    </view>
  </view>
</template>

<script>
  import api from '@/utils/api'
  export default {
    data() {
      return {
        tabBarHeight: 0
      }
    },
    mounted() {
      this.getSystemInfo()
    },
    methods: {
      getSystemInfo() { // 获取设备信息
        const systemInfo = uni.getSystemInfoSync()
        this.tabBarHeight = api.pxToRpx(systemInfo.screenHeight - systemInfo.safeArea.bottom)
        this.setPageStyle()
      },
      setPageStyle() { // 设置页面样式
        uni.createSelectorQuery().select('.wrapper').boundingClientRect(rect => {
          const height = api.pxToRpx(rect.height)
          uni.$emit('setPageStyle', {height: height, tabBarHeight: this.tabBarHeight})
        }).exec()
      }
    }
  }
</script>

<style>
  .wrapper {
    height: 100%;
  }
  .tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: #fff;
    border-top: 1px solid #ddd;
    text-align: center;
  }
</style>

Dalam setiap halaman, anda perlu mendengar acara uni.$emit('setPageStyle') dan tetapkan gaya yang sepadan mengikut ketinggian halaman dan ketinggian menu bawah untuk memastikan Tatal halaman berfungsi dengan baik.

Walaupun anda boleh merangkum sendiri komponen menu bawah untuk mencapai kegunaan umum, ia agak menyusahkan dan tidak sesuai untuk pemula yang tidak biasa dengan uniapi kerana keperluan untuk menangani beberapa isu remeh.

3. Gunakan pemalam

Memandangkan menu bawah adalah sangat biasa dalam aplikasi mudah alih, banyak pembangun telah merangkumkan pemalam menu bawah uniapp, yang menjimatkan beberapa tugas remeh pemaju Kerja. Menggunakan pemalam boleh mencapai panggilan yang cepat dan mudah, serta boleh menyesuaikan gaya dan interaksi dengan mudah.

Pemalam menu bawah uniapp sangat mudah digunakan Anda hanya perlu memperkenalkan pemalam yang sepadan dalam fail page.json. Menggunakan pemalam boleh menetapkan fungsi dan gaya interaktif menu bawah dengan mudah, yang lebih sesuai untuk pemula yang tidak biasa dengan uniapi.

Artikel ini memperkenalkan pemalam menu bawah uniapp "uniui-tabbar", iaitu pemalam menu bawah yang ringkas dan mudah digunakan dengan kemudahan penggunaan dan kebolehskalaan menu bawah boleh disesuaikan.

Anda boleh membiasakan diri dengan cepat menggunakan uniui-tabbar melalui dokumentasi rasmi:

<template>
  <view>
    <!-- 页面内容 -->
  </view>
  <uniui-tabbar :active="active" :tab-bar-list="tabBar.list" @onChange="onChange"></uniui-tabbar>
</template>

<script>
  export default {
    data() {
      return {
        active: 0,
        tabBar: {
          color:"#999",
          selectedColor:"#007aff",
          borderStyle:"black",
          backgroundColor:"#f9f9f9",
          list:[{
            "text":"首页",
            "iconPath":"/static/tabbar/home.png",
            "selectedIconPath":"/static/tabbar/home_active.png"
          },{
            "text":"分类",
            "iconPath":"/static/tabbar/category.png",
            "selectedIconPath":"/static/tabbar/category_active.png"
          },{
            "text":"购物车",
            "iconPath":"/static/tabbar/cart.png",
            "selectedIconPath":"/static/tabbar/cart_active.png"
          },{
            "text":"我的",
            "iconPath":"/static/tabbar/user.png",
            "selectedIconPath":"/static/tabbar/user_active.png"
          }]
        }
      }
    },
    methods: {
      onChange(index) {
        this.active = index
        uni.switchTab({
          url: '/' + this.tabBar.list[index].pagePath
        })
      }
    }
  }
</script>

Apabila menggunakan pemalam uniui-tabbar, anda hanya perlu menetapkan data menu bawah dan hantar data ke tab-bar -list atribut sudah memadai. Pantau acara penukaran menu bawah melalui acara onChange Apabila menukar menu bawah, anda boleh menggunakan uni.switchTabAPI untuk melompat ke halaman. Pembangun hanya perlu menumpukan pada definisi data dan gaya menu bawah, dan bukannya melakukan pelbagai pengiraan remeh dan pelarasan gaya.

Ringkasan:

Semasa proses pembangunan, kita perlu memilih kaedah yang sesuai untuk melaksanakan menu bawah biasa berdasarkan keperluan sebenar kita. Dalam uniapp, adalah lebih mudah untuk menggunakan komponen atau pemalam rasmi Kaedah mana yang hendak dipilih bergantung pada situasi sebenar anda. Apabila melaksanakan menu bawah biasa, cuba kurangkan beban kerja yang tidak perlu dan fokus pada penggunaan semula kod dan kesederhanaan kod, dengan itu meningkatkan kecekapan pembangunan dan kebolehbacaan kod.

Atas ialah kandungan terperinci Cara berkongsi menu bawah dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!