uniapp 原生头部加选项卡

在UniApp中，要在原生头部加入选项卡，可以通过使用uni-ui组件库中的TabBar组件来实现。

首先，需要在项目中导入uni-ui组件库。可以通过以下步骤完成：

1. 打开项目根目录下的 `pages.json` 文件。
2. 找到 `"easycom"` 字段，如没有则创建一个。
3. 在 "easycom" 字段的值中添加需要使用的组件路径，格式为 `path/to/component`。可以使用相对路径，例如 `"path/to/component"`。也可以使用绝对路径，例如 `"/path/to/component"`。
4. 保存 `pages.json` 文件。

导入成功后，就可以在页面的 `template` 中使用TabBar组件了。以下是示例代码：

<template>
  <view>
    <view class="header">头部内容</view>
    <view class="tabbar">
      <tab-bar :current="currentTab" @click="handleTabClick">
        <tab-bar-item title="选项1" icon="home"></tab-bar-item>
        <tab-bar-item title="选项2" icon="discover"></tab-bar-item>
        <tab-bar-item title="选项3" icon="setting"></tab-bar-item>
      </tab-bar>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentTab: 0 // 当前选中的选项卡索引
      };
    },
    methods: {
      handleTabClick(index) {
        this.currentTab = index;
        // 处理选项卡点击事件
      }
    }
  };
</script>

<style>
  .header {
    height: 100px;
    background-color: #ccc;
  }
  .tabbar {
    height: 50px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #ccc;
  }
</style>

在示例代码中，TabBar组件被放置在头部下方的固定位置，并且根据当前选中的选项卡索引来显示对应的内容。当点击选项卡时，会调用 `handleTabClick` 方法来处理点击事件，并更新当前选中的选项卡索引。

希望以上内容对您有所帮助！