uni-app 2级tabs线条位置不正确

在uni-app中，如果你遇到2级Tabs线条位置不正确的问题，这通常是由于样式或布局设置不当导致的。以下是一个基本的示例代码，展示了如何实现2级Tabs，并确保线条位置正确。这里我们将使用uni-app的<tabs>和<tab-pane>组件，并结合一些CSS样式来调整线条位置。

首先，确保你的uni-app项目已经创建，并且在pages目录下有一个页面文件，例如pages/index/index.vue。

index.vue

<template>
  <view class="container">
    <tabs class="tabs" @change="tabChange">
      <tab-pane title="Tab 1" name="1">
        <view class="tab-content">
          <!-- 2级Tabs开始 -->
          <view class="sub-tabs-container">
            <view 
              v-for="(subTab, index) in subTabs" 
              :key="index" 
              :class="['sub-tab', {active: activeSubTab === index}]" 
              @click="changeSubTab(index)"
            >
              {{ subTab.title }}
              <view class="line" :style="{left: `${index * 100 / subTabs.length}%`}"></view>
            </view>
          </view>
          <view class="sub-tab-content">
            <!-- 根据activeSubTab显示对应内容 -->
            <view v-if="activeSubTab === 0">Sub Tab 1 Content</view>
            <view v-else-if="activeSubTab === 1">Sub Tab 2 Content</view>
            <view v-else-if="activeSubTab === 2">Sub Tab 3 Content</view>
          </view>
        </view>
      </tab-pane>
      <!-- 可以添加更多tab-pane -->
    </tabs>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeSubTab: 0,
      subTabs: [
        { title: 'Sub Tab 1' },
        { title: 'Sub Tab 2' },
        { title: 'Sub Tab 3' }
      ]
    };
  },
  methods: {
    tabChange(e) {},
    changeSubTab(index) {
      this.activeSubTab = index;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.tabs {
  /* 根据需要调整样式 */
}
.sub-tabs-container {
  display: flex;
  position: relative;
}
.sub-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
}
.sub-tab.active {
  font-weight: bold;
  color: #007aff;
}
.line {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #007aff;
  width: 100% / subTabs.length; /* 确保宽度正确 */
  transition: left 0.3s;
}
.sub-tab-content {
  margin-top: 20px;
}
</style>

在这个示例中，我们使用了<view>元素来模拟2级Tabs，并通过CSS中的:style绑定和计算属性来确保线条位置正确。注意，这里的line元素是通过计算得到的left值来动态定位的，这样可以确保线条始终位于当前激活的sub-tab下方。你可以根据实际需求调整样式和结构。