uniapp封装 底部tabbar

在 UniApp 中封装底部 Tabbar，你可以按照以下步骤进行操作：

1. 创建一个公共的 Tabbar 组件，可以使用 `uni-tabbar` 组件或者自定义组件实现。
2. 在 App.vue 文件中，使用 `<template>` 标签包裹 `<uni-tab-bar>` 组件，并设置 tabbar 的数据和事件处理方法。
3. 在每个页面的 vue 文件中，使用 `<template>` 标签包裹页面内容，并在相应的位置添加 `<uni-tab-bar-item>` 组件，设置对应的图标、标题和路径。
4. 在每个页面的 vue 文件中，在 `<script>` 标签中引入 tabbar 组件，并在 `data` 属性中定义 tabbar 的数据和事件处理方法。
5. 在组件的事件处理方法中，根据当前选中的 tabbar 项，通过 `uni.switchTab` 方法跳转到对应的页面。

下面是一个简单的示例：

App.vue：

<template>
  <view>
    <template>
      <uni-tab-bar :selected="selectedIndex" @click="switchTab">
        <uni-tab-bar-item index="0" icon="home" text="首页" page="/pages/home"></uni-tab-bar-item>
        <uni-tab-bar-item index="1" icon="list" text="列表" page="/pages/list"></uni-tab-bar-item>
        <uni-tab-bar-item index="2" icon="user" text="我的" page="/pages/mine"></uni-tab-bar-item>
      </uni-tab-bar>
    </template>
    <router-view></router-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedIndex: 0
    }
  },
  methods: {
    switchTab(index) {
      this.selectedIndex = index
      uni.switchTab({
        url: this.$children.$children[index].page
      })
    }
  }
}
</script>

Home.vue：

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import UniTabBarItem from '@/components/UniTabBarItem.vue'

export default {
  components: {
    UniTabBarItem
  },
  data() {
    return {
      tabbarData: [
        { index: 0, icon: 'home', text: '首页', page: '/pages/home' },
        { index: 1, icon: 'list', text: '列表', page: '/pages/list' },
        { index: 2, icon: 'user', text: '我的', page: '/pages/mine' }
      ]
    }
  },
  methods: {
    switchTab(index) {
      uni.switchTab({
        url: this.tabbarData[index].page
      })
    }
  }
}
</script>

List.vue 和 Mine.vue 的代码类似，只需要修改对应的页面内容和 tabbarData 数据。

这样，你就可以在页面中使用底部 Tabbar，并实现页面间的切换了。希望能对你有所帮助！如果还有其他问题，请随时提问。