我可爱的app
- 发布：2024-05-21 18:05
- 更新：2024-05-21 18:22
- 阅读：229
产品分类： 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>
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>
操作步骤：
不可复现
不可复现
预期结果：
不可复现
不可复现
实际结果：
无
无
