uniapp如何公用一個底部選單

隨著行動裝置的快速發展，越來越多的開發者開始使用uniapp來進行跨平台開發。在行動應用程式中，底部選單是一個非常常見的UI元件，不同於iOS和Android的差異，使用uniapp可以在不同平台下實現一致的底部選單互動和樣式，但是如何公用一個底部選單呢？本文將詳細介紹uniapp如何實現公用一個底部選單。

1. 使用底部選單元件

uniapp提供了官方底部選單元件uni-tabbar，在使用時可以在page.json檔案中引用。底部選單元件可以透過配置uni-tabbar的pages屬性來實現頁面的跳躍。需要注意的是，底部選單元件只支援配置四個tab頁面，且每個頁面必須使用page標籤包裹。

範例如下：

{
  "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"
    }]
  }
}

在使用底部選單元件時，開發者只需要在每個頁面的page.json檔案中配置對應的tabBar屬性就可以了，但是由於需要在每個頁面的page.json檔案中配置，這個方法比較繁瑣，不適合公用一個底部選單。

2. 封裝底部選單元件

有些開發者會選擇自己封裝底部選單元件，例如將底部選單以元件的形式進行封裝，在需要用到底部選單的頁面中引入。這種方式雖然比較方便，但是在uniapp中封裝底部選單元件也有一些瑣碎的工作要做。

首先，在底部選單元件中需要使用原生uni-api的uni.getSystemInfoSync()方法來取得裝置螢幕高度和底部選單高度，從而計算出除去底部選單之外的頁面高度。其次，在每個頁面中需要手動設定相應的底部選單高度和頁面高度，這樣才能實現正常的頁面捲動。

範例程式碼如下：

<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>

在每個頁面中需要監聽uni.$emit('setPageStyle')事件，並根據頁面高度和底部選單高度設定對應的樣式，確保頁面滾動正常。

雖然自己封裝底部選單元件可以實現公用，但是由於需要處理一些瑣碎的問題，比較繁瑣且不太適合不熟悉uniapi的初學者。

3. 使用插件

由於底部選單在行動應用中非常常見，所以有許多開發者封裝了uniapp底部選單插件，免去了開發者的一些瑣碎工作。使用外掛程式可以實現快速方便的調用，並且可以方便的進行樣式和互動的客製化。

uniapp底部選單外掛程式使用起來非常簡單，只需要在page.json檔案中引入對應的外掛程式。使用外掛程式可以方便的設定底部選單的互動功能和樣式，比較適合不熟悉uniapi的初學者。

本文介紹一款uniapp底部選單外掛程式“uniui-tabbar”，這是一款簡潔易用的底部選單插件，具有易用性和擴展性，可自訂底部選單的樣式和文字。

透過官方文件可以快速熟悉uniui-tabbar的使用方法：

<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>

使用uniui-tabbar外掛程式時，只需要在設定好底部選單資料後，將資料傳給tab-bar -list屬性即可。透過onChange事件監聽底部選單切換事件，在切換底部選單時可以使用uni.switchTabAPI來實現頁面的跳躍。開發者只需要專注於底部選單資料和樣式的定義，而不是進行各種瑣碎的計算和樣式的調整。

總結：

在開發過程中，我們需要根據自己的實際需求來選擇合適的方法來實現公用底部選單。在uniapp中，使用官方元件或外掛程式都是比較方便的方法，具體選擇哪種方法，可以根據自己的實際情況來進行選擇。在實現公用底部選單時，盡量減少不必要的工作量，專注於程式碼重複使用和程式碼的簡介性，進而提高開發效率和程式碼可讀性。

以上是uniapp如何公用一個底部選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！