我可爱的app
我可爱的app
  • 发布:2024-05-21 18:05
  • 更新:2024-05-21 18:22
  • 阅读:48

【报Bug】nvue下用css的position: sticky 做吸顶,在向下滚动的时候会被原生的tabBar挡住。

分类:uni-app

产品分类: 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>

操作步骤:

不可复现

预期结果:

不可复现

实际结果:

bug描述:

2024-05-21 18:05 负责人:无 分享
已邀请:
锦鲤_接单

锦鲤_接单 - #接活#多年开发经验#帮您解决疑难杂症#Tel_18560000860

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

锦鲤_接单

锦鲤_接单 - #接活#多年开发经验#帮您解决疑难杂症#Tel_18560000860

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

  • 我可爱的app (作者)

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

    2024-05-21 18:49

要回复问题请先登录注册