uni-app 实现 tabs 吸顶功能

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 实现 tabs 吸顶功能

问题描述

  • tabs 里面有 nvue的插件 view-scroll
  • 分析下来就是双滑动父组件吸顶子组件才开始滑动
  • 但是这种 吸顶的瞬间 子组件的滑动才打开 这样的话 会有一个刹车效果
  • 瞬间停止 让人感觉是卡住了一样
  • 有没有什么好的办法解决啊
Harmonyos Next教程
3 回复

如果你需要吸顶后，可继续左右拖动长列表，那请参考hello uni-app模板里的swiper-list，从HBuilderX2.6.6+起新建项目选择的hello uni-app模板带有该功能，是nvue实现的。


那个swiper-list 有卡顿现象,吸顶的瞬间划不动了,

在 uni-app 中实现 Tabs 吸顶功能，通常涉及到页面布局和组件的使用。以下是一个简单的代码示例，展示如何在 uni-app 中实现 Tabs 吸顶效果。

首先，确保你的项目已经创建并初始化完成。然后，按照以下步骤进行：

  1. 创建 Tabs 组件：

在 components 目录下创建一个名为 StickyTabs.vue 的组件文件。

<template>
  <view class="tabs-container">
    <view class="tabs" :style="{ top: isSticky ? '44px' : '0px' }">
      <view class="tab-item" v-for="(tab, index) in tabs" :key="index" @click="switchTab(index)">
        {{ tab.title }}
      </view>
    </view>
    <scroll-view scroll-y="true" @scroll="handleScroll">
      <view v-for="(tab, index) in tabs" :key="index" v-if="activeTab === index">
        <slot :name="'tab' + index"></slot>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab 1' },
        { title: 'Tab 2' },
        // 更多 Tab 项
      ],
      activeTab: 0,
      isSticky: false,
      scrollTop: 0,
    };
  },
  methods: {
    switchTab(index) {
      this.activeTab = index;
    },
    handleScroll(e) {
      this.scrollTop = e.detail.scrollTop;
      this.isSticky = this.scrollTop > 44; // 44px 是状态栏和导航栏的高度，根据实际情况调整
    },
  },
};
</script>

<style scoped>
.tabs-container {
  position: relative;
}
.tabs {
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 999;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-around;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}
</style>
  1. 使用 Tabs 组件：

在你的页面文件中（例如 pages/index/index.vue），引入并使用 StickyTabs 组件。

<template>
  <view>
    <sticky-tabs>
      <template v-slot:tab0>
        <view>Content for Tab 1</view>
      </template>
      <template v-slot:tab1>
        <view>Content for Tab 2</view>
      </template>
      <!-- 更多 Tab 内容 -->
    </sticky-tabs>
  </view>
</template>

<script>
import StickyTabs from '@/components/StickyTabs.vue';

export default {
  components: {
    StickyTabs,
  },
};
</script>

以上代码展示了如何在 uni-app 中实现 Tabs 吸顶功能。StickyTabs 组件通过监听滚动事件，动态调整 Tabs 的位置，从而实现吸顶效果。你可以根据实际需求进一步定制和扩展此组件。

回到顶部