uniapp动态底部tabbar

Uniapp 中可以通过使用 `uni-tab-bar` 组件来实现动态底部 TabBar。你可以通过修改 `uni-tab-bar` 的 `list` 属性来动态设置 TabBar 的选项卡，例如：

<template>
  <view>
    <uni-tab-bar :list="tabList" :active="active">
      <view>这是页面一的内容</view>
      <view>这是页面二的内容</view>
      <view>这是页面三的内容</view>
    </uni-tab-bar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabList: [
        {
          text: "选项卡一",
          iconPath: "/static/tabbar/tab1.png",
          selectedIconPath: "/static/tabbar/tab1-active.png"
        },
        {
          text: "选项卡二",
          iconPath: "/static/tabbar/tab2.png",
          selectedIconPath: "/static/tabbar/tab2-active.png"
        },
        {
          text: "选项卡三",
          iconPath: "/static/tabbar/tab3.png",
          selectedIconPath: "/static/tabbar/tab3-active.png"
        }
      ]
    };
  }
};
</script>

在上述代码中，我们通过 `tabList` 数组来设置 TabBar 的选项卡，每个选项卡包含了文本、未选中状态图标和选中状态图标。通过修改 `active` 属性来设置当前选中的选项卡。在 `uni-tab-bar` 组件中，我们可以在组件内使用 `slot` 来插入不同的页面内容。