uni-app 实现 tabs在页面中间 主容器滑动时tabs吸顶且内部可滑动

在 Uni-App 中实现 Tabs 在页面中间位置，并在主容器滑动时 Tabs 吸顶且内部可滑动，你可以通过以下步骤实现：

1. 页面布局：使用 Flexbox 布局将 Tabs 放置在页面中间，同时确保主容器可以滚动。

2. 监听滚动事件：在主容器滚动时，通过监听滚动事件来动态设置 Tabs 的位置，使其在滚动到顶部时吸顶。

3. 内部滚动：为 Tabs 内部的内容添加滚动支持。

以下是一个简化的代码示例：

<template>
  <view class="container">
    <view class="header">Header</view>
    <view class="main-content" @scroll="handleScroll">
      <view class="tabs-wrapper" :class="{ fixed: isTabsFixed }">
        <view class="tab" v-for="(tab, index) in tabs" :key="index">{{ tab }}</view>
      </view>
      <scroll-view class="tab-content" scroll-y="true">
        <view v-for="(content, index) in tabContents" :key="index" class="content-item">
          {{ content }}
          <!-- Add more content to enable scrolling -->
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isTabsFixed: false,
      tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
      tabContents: ['Content 1', 'Content 2', 'Content 3']
    };
  },
  methods: {
    handleScroll(event) {
      const scrollTop = event.detail.scrollTop;
      const tabsWrapperTop = this.$refs.tabsWrapper.offsetTop;
      this.isTabsFixed = scrollTop > tabsWrapperTop;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 50px;
  background-color: #f8f8f8;
}

.main-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.tabs-wrapper {
  display: flex;
  justify-content: center;
  background-color: #fff;
  padding: 10px 0;
  transition: top 0.3s;
  position: absolute;
  width: 100%;
  top: 0; /* Initially positioned at the top */
}

.tabs-wrapper.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-bottom: 2px solid transparent;
}

.tab.active {
  border-bottom-color: #007aff;
}

.tab-content {
  padding-top: 60px; /* Space for fixed tabs */
}

.content-item {
  height: 200px; /* Example height to enable scrolling */
  border-bottom: 1px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
}
</style>

注意：

• 在 handleScroll 方法中，我们通过比较 scrollTop 和 tabsWrapperTop 来确定是否需要将 Tabs 吸顶。
• 使用 transition 属性使 Tabs 在固定和解除固定时有一个平滑的动画效果。
• 使用了 scroll-view 组件来确保 Tabs 内部的内容可以滚动。
• 根据实际情况，你可能需要调整样式和布局，以满足具体的设计需求。