uni-app nvue下使用css的position: sticky做吸顶时，向下滚动会被原生tabBar挡住。

uni-app nvue下使用css的position: sticky做吸顶时，向下滚动会被原生tabBar挡住。

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 14.4.1 (23E224)
HBuilderX类型 正式
HBuilderX版本号 4.15
手机系统 iOS
手机系统版本号 iOS 17
手机厂商 苹果
手机机型 14
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

nvue下用css的position: sticky 做吸顶，在向下滚动的时候会被原生的tabBar挡住（也就是吸附在tabbar上方了），正确的应该不被吸附。

<template>
    <!-- 列表选项卡吸顶 -->
    <header class="tab_sticky">
        <scroll-view scroll-x class="scroll-row d-flex a-center " style="height:50px;"  
        scroll-into-view="platform_item_scrollinto" :scroll-with-animation="true"
        show-scrollbar="false" @scroll="onScroll">
            <view class="scroll-row-item px-2" @click="platform_changeTab(indexkey)"
                v-for="(items,indexkey) in platform_item_list" :key="indexkey" :id="'tabs'+indexkey">
                <text class="font-30"  
                class="platform_item_tabIndex === indexkey ? 'border-bottom_search main-text-color':''">{{items.name}}</text>
            </view>
        </scroll-view>
    </header>
</template>
<style>
.tab_sticky {
    position: sticky;
    top: 5px; /* 当滚动到20px时，元素开始固定 */
}
</style>

操作步骤：

  • 不可复现

预期结果：

  • 不可复现

实际结果：

  • 无

更多关于uni-app nvue下使用css的position: sticky做吸顶时，向下滚动会被原生tabBar挡住。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

被底部的Tabbar挡住？吸顶应该吸附在顶部，怎么会被底部的Tabbar挡住呢？

更多关于uni-app nvue下使用css的position: sticky做吸顶时，向下滚动会被原生tabBar挡住。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


如果想让元素上滑的时候吸附在顶部，下滑的时候吸附在底部，同时设置top和bottom就行了

您说反了，我不需要吸附在底部，也没有设置bottom，但是向下滚动的时候会吸附在底部的TabBar上。

在 uni-app 的 nvue 中使用 position: sticky 实现吸顶效果时，可能会遇到吸顶元素被原生 tabBar 挡住的问题。这是因为 nvue 是原生渲染，其布局和样式处理与常规的 webview 有所不同，特别是涉及到原生组件（如 tabBar）时。

解决方案：

  1. 调整 sticky 元素的 top 值： 你可以通过调整 position: sticky 的 top 值来避免元素被 tabBar 挡住。例如，如果 tabBar 的高度为 50px，你可以将 top 值设置为 50px，这样吸顶元素会在距离页面顶部 50px 的位置开始吸顶。

    .sticky-element {
  position: sticky;
  top: 50px; /* 根据 tabBar 的高度调整 */
  z-index: 100;
}

  2. 使用 uni-app 提供的 getSystemInfoSync 获取 tabBar 高度： 如果你不确定 tabBar 的高度，可以使用 uni-app 提供的 getSystemInfoSync 方法动态获取 tabBar 的高度，并在样式中动态设置 top 值。

    const systemInfo = uni.getSystemInfoSync();
const tabBarHeight = systemInfo.windowHeight - systemInfo.screenHeight + systemInfo.statusBarHeight;

// 在样式中动态设置 top 值
this.topValue = tabBarHeight + 'px';

    然后在模板中使用动态样式：

    <view class="sticky-element" :style="{ top: topValue }">
  <!-- 吸顶内容 -->
</view>

  3. 使用 uni-app 的 page-meta 组件： page-meta 组件可以用来设置页面的 navigationBar 和 tabBar 的相关属性。你可以通过 page-meta 来控制页面的布局，避免吸顶元素被 tabBar 挡住。

    <page-meta :navigation-bar-height="navigationBarHeight" :tab-bar-height="tabBarHeight"></page-meta>
回到顶部