如何在 UniApp 中設置中間 TabBar 凸起效果

在移動應用開發中，TabBar 是常見的導航組件，而中間凸起的 TabBar 按鈕則是一種流行的設計風格，常用于突出重要功能（如發布、拍照等）。UniApp 提供了 midButton 屬性，可以輕松實現這種效果。本文將詳細介紹如何在 UniApp 中配置中間凸起的 TabBar，并處理其點擊事件。

---

一、實現效果

我們將實現一個帶有中間凸起按鈕的 TabBar，效果如下：

• 中間按鈕高度大于其他 TabBar 項，形成凸起效果。
• 中間按鈕沒有 pagePath，需要通過監聽點擊事件自定義行為。
• 其他 TabBar 項正常跳轉頁面。

---

二、配置 TabBar

在 pages.json 中配置 tabBar，具體代碼如下：

{"tabBar": {"color": "#b1b6bd", // 默認顏色"selectedColor": "#2E3A71", // 選中顏色"borderStyle": "black", // 邊框樣式"backgroundColor": "#fff", // 背景顏色"midButton": {"iconPath": "/static/images/communication/communication.png", // 中間按鈕圖標"height": "65px", // 中間按鈕高度（大于其他項高度）"iconWidth": "56px" // 圖標寬度},"list": [{"pagePath": "pages/home/home", // 首頁頁面路徑"iconPath": "static/images/home/home.png", // 默認圖標"selectedIconPath": "static/images/home/home_active.png", // 選中圖標"text": "首頁" // 文字},{"pagePath": "pages/notification/notification","iconPath": "static/images/notification/notification.png","selectedIconPath": "static/images/notification/notification_active.png","text": "客戶"},{"pagePath": "pages/shop/likeShop/likeShop","iconPath": "static/images/shop/shop.png","selectedIconPath": "static/images/shop/shop_active.png","text": "工單"},{"pagePath": "pages/my/my","iconPath": "static/images/my/my.png","selectedIconPath": "static/images/my/my_active.png","text": "我的"}]}
}

關鍵配置說明：

1. midButton 屬性：

   • iconPath：中間按鈕的圖標路徑。
   • height：中間按鈕的高度，設置為大于其他 TabBar 項的高度即可實現凸起效果。
   • iconWidth：圖標的寬度，高度會等比例縮放。
   • 注意：midButton 沒有 pagePath，需要通過監聽點擊事件自定義行為。

2. list 屬性：

   • 配置其他 TabBar 項的頁面路徑、圖標和文字。

---

三、監聽中間按鈕點擊事件

由于 midButton 沒有 pagePath，我們需要通過 UniApp 提供的 API uni.onTabBarMidButtonTap 監聽其點擊事件，并自定義行為。

在項目的入口文件（如 App.vue）中添加以下代碼：

<script>
export default {onLaunch() {// 監聽中間按鈕點擊事件uni.onTabBarMidButtonTap(() => {console.log('中間按鈕被點擊');// 自定義行為，例如跳轉到指定頁面uni.navigateTo({url: '/pages/publish/publish' // 跳轉到發布頁面});});}
};
</script>

關鍵點：

1. uni.onTabBarMidButtonTap：

   • 用于監聽中間按鈕的點擊事件。
   • 在回調函數中編寫自定義邏輯，例如跳轉到指定頁面。

2. 跳轉頁面：

   • 使用 uni.navigateTo 跳轉到目標頁面。
   • 如果需要跳轉到 TabBar 頁面，可以使用 uni.switchTab。

---

四、注意事項

1. 圖標尺寸：

   • 中間按鈕的圖標尺寸需要根據設計稿調整，確保顯示效果符合預期。

2. 凸起高度：

   • midButton 的 height 屬性決定了凸起的高度，建議根據實際需求調整。

3. 兼容性：

   • midButton 是 UniApp 提供的特性，確保使用的 UniApp 版本支持該功能。

4. 自定義樣式：

   • 如果需要更復雜的樣式（如背景圖、字體圖標等），可以通過 backgroundImage 和 iconfont 屬性實現。

---

五、總結

通過 UniApp 的 midButton 屬性，我們可以輕松實現中間凸起的 TabBar 效果。關鍵步驟如下：

1. 在 pages.json 中配置 tabBar，設置 midButton 的高度和圖標。
2. 使用 uni.onTabBarMidButtonTap 監聽中間按鈕的點擊事件，并自定義行為。
3. 根據需求調整圖標尺寸、凸起高度等樣式。

希望本文能幫助你快速實現中間凸起的 TabBar 效果！如果有任何問題，歡迎留言討論。