uniapp如何公用一个底部菜单

百变鹏仔 2个月前 (11-20) #uniapp

文章标签菜单

随着移动设备的飞速发展，越来越多的开发者开始使用uniapp来进行跨平台开发。在移动应用中，底部菜单是一个非常常见的ui组件，不同于ios和android的差异，使用uniapp可以在不同平台下实现一致的底部菜单交互和样式，但是如何公用一个底部菜单呢？本文将详细介绍uniapp如何实现公用一个底部菜单。

使用底部菜单组件

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文件中配置，这个方法比较繁琐，不适合公用一个底部菜单。

封装底部菜单组件

有些开发者会选择自己封装底部菜单组件，比如将底部菜单以组件的形式进行封装，在需要用到底部菜单的页面中引入。这种方式虽然比较方便，但是在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的初学者。

使用插件

由于底部菜单在移动应用中非常常见，所以有许多开发者封装了uniapp底部菜单插件，免去了开发者的一些琐碎工作。使用插件可以实现快捷方便的调用，并且可以方便的进行样式和交互的定制。

uniapp底部菜单插件使用起来非常简单，只需要在page.json文件中引入相应的插件即可。使用插件可以方便的设置底部菜单的交互功能和样式，比较适合不熟悉uniapi的初学者。

本文介绍一款uniapp底部菜单插件“uniui-tabbar”，这是一款简洁易用的底部菜单插件，具有易用性和扩展性，可以自定义底部菜单的样式和文字。

通过官方文档可以快速熟悉uniui-tabbar的使用方法：

<template><view><!-- 页面内容 --></view><uniui-tabbar :active="active" :tab-bar-list="tabBar.list"></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如何公用一个底部菜单

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项