How to share a bottom menu in uniapp

With the rapid development of mobile devices, more and more developers are beginning to use uniapp for cross-platform development. In mobile applications, the bottom menu is a very common UI component. Different from the differences between iOS and Android, using uniapp can achieve consistent bottom menu interaction and style on different platforms, but how to share a bottom menu? This article will introduce in detail how uniapp implements a common bottom menu.

1. Using the bottom menu component

uniapp provides the official bottom menu component uni-tabbar, which can be referenced in the page.json file when using it. The bottom menu component can realize page jump by configuring the pages attribute of uni-tabbar. It should be noted that the bottom menu component only supports the configuration of four tab pages, and each page must be wrapped with a page tag.

The example is as follows:

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

When using the bottom menu component, the developer only needs to configure the corresponding tabBar attribute in the page.json file of each page. However, since it needs to be Configure in the page.json file of each page. This method is cumbersome and not suitable for sharing a bottom menu.

2. Encapsulate the bottom menu component

Some developers will choose to encapsulate the bottom menu component themselves, such as encapsulating the bottom menu in the form of a component. When you need to use the bottom menu introduced in the page. Although this method is more convenient, there is also some trivial work to be done when encapsulating the bottom menu component in uniapp.

First of all, in the bottom menu component, you need to use the uni.getSystemInfoSync() method of the native uni-api to obtain the device screen height and the bottom menu height, so as to calculate the page height excluding the bottom menu. Secondly, the corresponding bottom menu height and page height need to be manually set in each page so that normal page scrolling can be achieved.

The sample code is as follows:

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

In each page, you need to listen to the uni.$emit('setPageStyle') event, and set the corresponding style according to the page height and bottom menu height to ensure that the page Scrolling works fine.

Although you can encapsulate the bottom menu component yourself for public use, it is more cumbersome and not suitable for beginners who are not familiar with uniapi due to the need to deal with some trivial issues.

3. Using plug-ins

Since bottom menus are very common in mobile applications, many developers have encapsulated the uniapp bottom menu plug-in, which saves developers some trivial matters. Work. Using plug-ins can achieve quick and convenient calls, and can easily customize styles and interactions.

The uniapp bottom menu plug-in is very simple to use. You only need to introduce the corresponding plug-in in the page.json file. Using plug-ins can easily set the interactive functions and styles of the bottom menu, which is more suitable for beginners who are not familiar with uniapi.

This article introduces a uniapp bottom menu plug-in "uniui-tabbar", which is a simple and easy-to-use bottom menu plug-in with ease of use and scalability. The style and text of the bottom menu can be customized.

You can quickly familiarize yourself with the use of uniui-tabbar through the official documentation:

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

When using the uniui-tabbar plug-in, you only need to set the bottom menu data and then pass the data to tab-bar -list attribute is enough. Monitor the bottom menu switching event through the onChange event. When switching the bottom menu, you can use uni.switchTabAPI to jump to the page. Developers only need to focus on the definition of bottom menu data and styles, rather than performing various trivial calculations and style adjustments.

Summary:

During the development process, we need to choose the appropriate method to implement the public bottom menu based on our actual needs. In uniapp, it is more convenient to use official components or plug-ins. Which method to choose depends on your actual situation. When implementing a common bottom menu, try to reduce unnecessary workload and focus on code reuse and code simplicity, thereby improving development efficiency and code readability.

The above is the detailed content of How to share a bottom menu in uniapp. For more information, please follow other related articles on the PHP Chinese website!