uni-app底部导航

uni-app是一个跨平台的开发框架，可以用于同时开发App、H5、小程序等多个平台的应用程序。而底部导航栏是App开发中常见的一种导航方式，用于在底部展示多个页面入口，方便用户快速切换页面。

在uni-app中，可以通过使用uni-tabbar组件来实现底部导航栏。具体步骤如下：

1. 在页面的`template`中添加uni-tabbar组件，设置它的`v-model`属性用于控制当前选中的页面索引。例如：

<template>
  <view>
    <!-- 页面内容 -->
  </view>
  
  <uni-tabbar v-model="currentTab" :list="tabList"></uni-tabbar>
</template>

2. 在页面的`data`中定义`currentTab`和`tabList`，分别表示当前选中的页面索引和底部导航栏的配置。例如：

export default {
  data() {
    return {
      currentTab: 0,
      tabList: [
        {
          iconPath: 'static/tab-bar/home.png',
          selectedIconPath: 'static/tab-bar/home-selected.png',
          text: '首页',
          pagePath: '/pages/home/index'
        },
        {
          iconPath: 'static/tab-bar/category.png',
          selectedIconPath: 'static/tab-bar/category-selected.png',
          text: '分类',
          pagePath: '/pages/category/index'
        },
        // 其他页面配置
      ]
    };
  }
};

其中，`tabList`数组中每个元素表示一个底部导航项，包括图标路径、选中时的图标路径、文本和对应的页面路径。

3. 根据`currentTab`的值在页面中显示对应的内容。例如：

<view>
  <!-- 首页内容 -->
</view>

<view v-if="currentTab === 1">
  <!-- 分类页面内容 -->
</view>

<!-- 其他页面内容 -->

通过以上步骤，就可以在uni-app中实现底部导航栏的功能了。你可以根据需要配置不同的页面和对应的导航项。