uniapp设置微信小程序底部手机导航栏的间距

在uniapp中，可以通过修改 `tabBar` 组件的样式来设置微信小程序底部导航栏的间距。

1. 在页面的 `json` 文件中添加以下代码，设置 `tabBar` 组件的样式：

{
  "navigationBarTitleText": "首页",
  "tabBar": {
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "selectedColor": "#007aff",
    "color": "#999",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user-active.png"
      }
    ],
    "position": "bottom",
    "custom": true,
    "height": 60,
    "safeAreaInsetBottom": false
  }
}

其中，`height` 属性可以设置导航栏的高度，`safeAreaInsetBottom` 属性可以设置是否在导航栏底部留出安全区域。

2. 在页面的 `vue` 文件中，添加以下样式代码，设置导航栏的间距：

<style>
  .uni-tabbar {
    margin-bottom: 20px;
  }
</style>

其中，`margin-bottom` 属性可以设置导航栏与页面底部的间距。