XW-AIOT/aiot-uniapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(user): 退出登录按钮不被 tabbar 遮挡

Browse Source 
去掉 scroll-view + flex 布局，改用原生页面滚动 + 底部 spacer，
确保退出登录按钮在所有机型上可正常点击。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
lzh
2026-03-24 23:08:00 +08:00
parent f7049473bb
commit d4abeaac59
1 changed files with 33 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/pages/user/index.vue
View File

@@ -58,47 +58,41 @@
</view>
</view>
<!-- 可滚动内容区 -->
<scroll-view class="min-h-0 flex-1" scroll-y scroll-with-animation>
<!-- 菜单区域 -->
<view class="mx-40rpx mt-32rpx">
<view class="ai-card overflow-hidden">
<view
v-for="(item, index) in menuItems"
:key="item.title"
class="menu-item flex items-center px-32rpx py-28rpx"
:class="{ 'border-t-2rpx border-[#FFF7ED]': index > 0 }"
@click="item.action"
>
<view
class="mr-20rpx h-72rpx w-72rpx flex items-center justify-center rounded-24rpx bg-[#FFF7ED]"
>
<wd-icon :name="item.icon" size="20px" :color="item.iconColor" />
</view>
<view class="flex-1 text-28rpx text-[#1F2937] font-600">
{{ item.title }}
</view>
<wd-icon name="arrow-right" size="16px" color="#D1D5DB" />
</view>
</view>
</view>
<!-- 退出登录 -->
<view class="mx-40rpx mt-32rpx">
<!-- 菜单区域 -->
<view class="mx-40rpx mt-32rpx">
<view class="ai-card overflow-hidden">
<view
class="flex items-center justify-center rounded-48rpx bg-[#FEF2F2] py-28rpx"
@click="handleLogout"
v-for="(item, index) in menuItems"
:key="item.title"
class="menu-item flex items-center px-32rpx py-28rpx"
:class="{ 'border-t-2rpx border-[#FFF7ED]': index > 0 }"
@click="item.action"
>
<text class="text-28rpx text-[#EF4444] font-bold">退出登录</text>
<view
class="mr-20rpx h-72rpx w-72rpx flex items-center justify-center rounded-24rpx bg-[#FFF7ED]"
>
<wd-icon :name="item.icon" size="20px" :color="item.iconColor" />
</view>
<view class="flex-1 text-28rpx text-[#1F2937] font-600">
{{ item.title }}
</view>
<wd-icon name="arrow-right" size="16px" color="#D1D5DB" />
</view>
</view>
</view>
<!-- 底部留白 -->
<view style="height: 32rpx;" />
</scroll-view>
<!-- 退出登录 -->
<view class="mx-40rpx mt-32rpx">
<view
class="flex items-center justify-center rounded-48rpx bg-[#FEF2F2] py-28rpx"
@click="handleLogout"
>
<text class="text-28rpx text-[#EF4444] font-bold">退出登录</text>
</view>
</view>
<!-- tabbar 占位：作为 flex 兄弟撑开空间，避免内容被 fixed tabbar 遮挡 -->
<view class="tabbar-placeholder" />
<!-- 底部留白：为 fixed tabbar + 安全区留足空间 -->
<view class="bottom-spacer" />
</view>
</template>
@@ -187,26 +181,20 @@ function handleLogout() {
</script>
<style lang="scss">
/* 禁止原生页面滚动，让内部 scroll-view 接管 */
/* 允许原生页面滚动 */
page {
height: 100%;
overflow: hidden;
background-color: #fffdf5;
}
</style>
<style lang="scss" scoped>
.page-user {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
min-height: 100vh;
}
.tabbar-placeholder {
flex-shrink: 0;
.bottom-spacer {
// 刚好比 tabbar 高一点点（tabbar 60px ≈ 120rpx）
height: 140rpx;
// iOS 安全区
padding-bottom: constant(safe-area-inset-bottom, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}