fix: 修改个人中心页、导航栏bug

This commit is contained in:
R524809
2026-05-25 15:03:43 +08:00
parent 4379358a41
commit 000d7d8a7f
6 changed files with 41 additions and 8 deletions
@@ -14,7 +14,6 @@
} }
.nav-bar__inner { .nav-bar__inner {
height: @nav-inner-height;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -71,6 +70,7 @@
font-weight: @fw-nav-title; font-weight: @fw-nav-title;
color: @color-nav-title; color: @color-nav-title;
letter-spacing: @ls-nav-title; letter-spacing: @ls-nav-title;
line-height: 1;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
+5 -2
View File
@@ -1,4 +1,4 @@
import { NAV_INNER_PX } from '../../utils/navMetrics'; import { getNavInnerPx } from '../../utils/navMetrics';
const HOME_TAB_URL = '/pages/home/home'; const HOME_TAB_URL = '/pages/home/home';
const HOME_ROUTE = 'pages/home/home'; const HOME_ROUTE = 'pages/home/home';
@@ -19,6 +19,7 @@ Component({
}, },
data: { data: {
statusBarHeight: 0, statusBarHeight: 0,
navInnerHeight: 44,
navBlockHeight: 0, navBlockHeight: 0,
leftActionType: 'none' as 'none' | 'back' | 'home' | 'brand', leftActionType: 'none' as 'none' | 'back' | 'home' | 'brand',
/** 仅首页(Tab 根页)在 logo 旁展示「涂鸦丫」;其余主 Tab 只展示 logo */ /** 仅首页(Tab 根页)在 logo 旁展示「涂鸦丫」;其余主 Tab 只展示 logo */
@@ -27,9 +28,11 @@ Component({
lifetimes: { lifetimes: {
attached() { attached() {
const { statusBarHeight } = wx.getWindowInfo(); const { statusBarHeight } = wx.getWindowInfo();
const navInnerHeight = getNavInnerPx();
this.setData({ this.setData({
statusBarHeight, statusBarHeight,
navBlockHeight: statusBarHeight + NAV_INNER_PX, navInnerHeight,
navBlockHeight: statusBarHeight + navInnerHeight,
}); });
this.syncLeftAction(); this.syncLeftAction();
}, },
@@ -1,7 +1,7 @@
<view <view
class="nav-bar" class="nav-bar"
style="padding-top: {{statusBarHeight}}px; {{background ? 'background:' + background + ';' : ''}}"> style="padding-top: {{statusBarHeight}}px; {{background ? 'background:' + background + ';' : ''}}">
<view class="nav-bar__inner"> <view class="nav-bar__inner" style="height: {{navInnerHeight}}px;">
<view wx:if="{{leftActionType === 'brand'}}" class="nav-bar__brand"> <view wx:if="{{leftActionType === 'brand'}}" class="nav-bar__brand">
<image <image
class="nav-bar__logo" class="nav-bar__logo"
+1 -1
View File
@@ -331,7 +331,7 @@ page {
.profile-editor { .profile-editor {
overflow-y: auto; overflow-y: auto;
padding: 32rpx 40rpx; padding: 32rpx 40rpx;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: calc(32rpx + env(safe-area-inset-bottom) + 120rpx);
background: @bg-white; background: @bg-white;
box-sizing: border-box; box-sizing: border-box;
} }
+1 -1
View File
@@ -25,7 +25,7 @@ Page({
onLoad() { onLoad() {
this.syncUserInfoFromApp(); this.syncUserInfoFromApp();
const isDevEnv = const isDevEnv =
wx.getAccountInfoSync().miniProgram.envVersion !== 'release'; wx.getAccountInfoSync().miniProgram.envVersion === 'develop';
this.setData({ this.setData({
isDevEnv, isDevEnv,
}); });
+32 -2
View File
@@ -1,2 +1,32 @@
/** 与 style/theme.less 中 @nav-inner-height 对齐(px */ /**
export const NAV_INNER_PX = 44; * 导航栏内容区高度(px)。
* 基于胶囊按钮位置计算:让 inner 的垂直中心与胶囊中心对齐,
* inner_height = (capsule.top - statusBarHeight) * 2 + capsule.height。
* 默认值 44 仅作兜底。
*/
let cachedInnerPx: number | null = null;
function computeInnerPx(): number {
try {
const { statusBarHeight } = wx.getWindowInfo();
const rect = wx.getMenuButtonBoundingClientRect();
const inner = (rect.top - statusBarHeight) * 2 + rect.height;
if (inner > 0 && Number.isFinite(inner)) {
return Math.round(inner);
}
} catch (e) {
// ignore, fallback below
}
return 44;
}
export function getNavInnerPx(): number {
if (cachedInnerPx === null) {
cachedInnerPx = computeInnerPx();
}
return cachedInnerPx;
}
/** 兼容旧调用:保留常量导出,启动时取一次胶囊几何。 */
export const NAV_INNER_PX = getNavInnerPx();