uniapp h5苹果tabbar适配

对于在uni-app中开发H5页面，适配苹果TabBar可以按照以下步骤进行：

1. 确保使用的uni-app版本是2.8.0或以上，因为在这个版本之后，uni-app对底部TabBar适配做了优化。

2. 在`manifest.json`文件中的`tabBar`字段中新增一个属性`custom`，并设置为`true`，表示使用自定义的TabBar。

3. 在页面中创建一个自定义的TabBar组件，可以使用uni-app提供的`uni-tab-bar`组件或自行开发。

4. 在自定义TabBar组件中，根据设备类型和系统版本进行判断，对苹果设备进行特殊适配。可以使用`uni.getSystemInfoSync()`方法获取设备信息。

5. 对于苹果设备，可以使用CSS属性`safe-area-inset-bottom`来调整底部TabBar的位置，确保不被iPhone X系列以上设备的底部安全区域遮挡。可以使用CSS变量来设置TabBar的位置。

下面是一个示例代码：

<template>
  <view class="tab-bar">
    <view class="tab-item" :class="activeIndex === 0 ? 'active' : ''" @click="switchTab(0)">
      <text>Tab 1</text>
    </view>
    <view class="tab-item" :class="activeIndex === 1 ? 'active' : ''" @click="switchTab(1)">
      <text>Tab 2</text>
    </view>
    <view class="tab-item" :class="activeIndex === 2 ? 'active' : ''" @click="switchTab(2)">
      <text>Tab 3</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    switchTab(index) {
      this.activeIndex = index
      // 切换页面逻辑
    }
  }
}
</script>

<style>
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--safe-area-inset-bottom);
  height: 50px;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-item.active {
  color: #ff0000;
}
</style>

在上面的示例中，我们创建了一个自定义的TabBar组件，通过判断`activeIndex`来确定当前选中的Tab项。通过CSS属性`--safe-area-inset-bottom`来调整底部安全区域的高度，确保底部TabBar不被遮挡。

这样就可以对苹果设备进行适配，确保底部TabBar在H5页面上显示正常。希望对你有所帮助！