uniapp如何公用一个底部菜单-uni-app-PHP中文网

uniapp如何公用一个底部菜单

WBOY

发布： 2023-05-26 09:00:07

原创

1085人浏览过

随着移动设备的飞速发展，越来越多的开发者开始使用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的初学者。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

使用插件

由于底部菜单在移动应用中非常常见，所以有许多开发者封装了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中文网其它相关文章！