uniapp使用uview自定义底部导航栏

在uniapp中使用uView自定义底部导航栏的步骤如下：

1. 安装uView插件，在HBuilderX中打开项目，右键点击项目根目录，选择"插件安装"，搜索uView，安装并重启HBuilderX。

2. 在App.vue文件中引入uView组件库：

import uView from 'uview-ui';
Vue.use(uView);

3. 在pages.json中配置底部导航栏，如下所示：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/mine/mine",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#007AFF",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/tabbar/mine.png",
        "selectedIconPath": "static/tabbar/mine_active.png"
      }
    ]
  }
}

其中，"tabBar"字段配置底部导航栏，"list"数组配置每个导航项的属性。

4. 在各个页面中添加导航栏的内容，如下所示：

<template>
  <view>
    <view>这是首页</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '首页'
    }
  },
  onNavigationBarButtonTap() {
    uni.navigateTo({
      url: '/pages/search/search'
    });
  }
}
</script>

其中，"data"中配置页面标题，"onNavigationBarButtonTap"函数配置导航栏右侧按钮的点击事件。

5. 在App.vue中配置全局导航栏样式，如下所示：

<style lang="scss">
// 配置全局导航栏样式
.u-navbar {
  background-color: #007aff;
  color: #ffffff;
}
</style>

6. 运行项目，即可看到自定义的底部导航栏了。