From 865969c329b994dc1f5358aa055b1cbf41a45975 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Wed, 17 Jun 2026 15:15:30 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix(tab-bar):=20=E4=BF=AE=E5=A4=8Dplacehode?= =?UTF-8?q?r=E9=AB=98=E5=BA=A6=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/tab-bar/tab-bar.ts | 22 +++++++++++-- .../uniapp-components/tab-bar/tab-bar.vue | 32 +++++++++++++++++-- 2 files changed, 50 insertions(+), 4 deletions(-) diff --git a/packages/components/tab-bar/tab-bar.ts b/packages/components/tab-bar/tab-bar.ts index 7fa06bfe29..5d0bb89be4 100644 --- a/packages/components/tab-bar/tab-bar.ts +++ b/packages/components/tab-bar/tab-bar.ts @@ -2,10 +2,24 @@ import { wxComponent, SuperComponent, RelationsOptions } from '../common/src/ind import config from '../common/config'; import props from './props'; import { getRect } from '../common/utils'; +import { getWindowInfo } from '../common/wechat'; const { prefix } = config; const classPrefix = `${prefix}-tab-bar`; +/** 获取底部安全区高度（home indicator 区） */ +function getSafeAreaBottom() { + try { + const info = getWindowInfo(); + if (info && info.safeArea && typeof info.screenHeight === 'number') { + return Math.max(0, info.screenHeight - info.safeArea.bottom); + } + } catch (e) { + // ignore + } + return 0; +} + @wxComponent() export default class Tabbar extends SuperComponent { relations: RelationsOptions = { @@ -37,7 +51,7 @@ export default class Tabbar extends SuperComponent { value() { this.updateChildren(); }, - 'fixed, placeholder'() { + 'fixed, placeholder, shape, safeAreaInsetBottom'() { this.setPlaceholderHeight(); }, }; @@ -54,7 +68,11 @@ export default class Tabbar extends SuperComponent { wx.nextTick(() => { getRect(this, `.${classPrefix}`).then((res) => { - this.setData({ placeholderHeight: res.height }); + let { height } = res; + if (this.properties.shape === 'round' && this.properties.safeAreaInsetBottom) { + height += getSafeAreaBottom(); + } + this.setData({ placeholderHeight: height }); }); }); }, diff --git a/packages/uniapp-components/tab-bar/tab-bar.vue b/packages/uniapp-components/tab-bar/tab-bar.vue index d4d742a37d..c127f1cfae 100644 --- a/packages/uniapp-components/tab-bar/tab-bar.vue +++ b/packages/uniapp-components/tab-bar/tab-bar.vue @@ -26,13 +26,26 @@ import { prefix } from '../common/config'; import { ParentMixin, RELATION_MAP } from '../common/relation'; import { uniComponent } from '../common/src/index'; -import { coalesce, getRect, nextTick } from '../common/utils'; +import { coalesce, getRect, nextTick, getWindowInfo } from '../common/utils'; import tools from '../common/utils.wxs'; import props from './props'; const classPrefix = `${prefix}-tab-bar`; +/** 获取底部安全区高度（home indicator 区） */ +function getSafeAreaBottom() { + try { + const info = getWindowInfo(); + if (info && info.safeArea && typeof info.screenHeight === 'number') { + return Math.max(0, info.screenHeight - info.safeArea.bottom); + } + } catch (e) { + // ignore + } + return 0; +} + export default { ...uniComponent({ @@ -81,6 +94,12 @@ export default { placeholder() { this.setPlaceholderHeight(); }, + shape() { + this.setPlaceholderHeight(); + }, + safeAreaInsetBottom() { + this.setPlaceholderHeight(); + }, }, mounted() { this.setPlaceholderHeight(); @@ -93,7 +112,16 @@ export default { } nextTick().then(() => { getRect(this, `.${classPrefix}`).then((res) => { - this.placeholderHeight = res.height; + let { height } = res; + // round 形态使用 `bottom: env(safe-area-inset-bottom)` 上抬整个 bar， + // getBoundingClientRect 拿到的高度不包含这部分上抬量，需要手动补上， + // 否则 placeholder 占位高度会少一个底部安全区，导致页面内容被遮挡。 + // normal 形态使用 `padding-bottom: env(safe-area-inset-bottom)`， + // 安全区已包含在元素自身高度中，无需重复补。 + if (this.shape === 'round' && this.safeAreaInsetBottom) { + height += getSafeAreaBottom(); + } + this.placeholderHeight = height; }); }); }, From d7e085ca8cc4346efd5cefc41f1e502c1999ab6a Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Thu, 18 Jun 2026 17:29:09 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix(color-picker):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E9=A2=84=E8=AE=BE=E8=89=B2=E5=BD=A9=E4=B8=8D=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../color-picker/color-picker.less | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/packages/uniapp-components/color-picker/color-picker.less b/packages/uniapp-components/color-picker/color-picker.less index 3b42173a8d..461a49958d 100644 --- a/packages/uniapp-components/color-picker/color-picker.less +++ b/packages/uniapp-components/color-picker/color-picker.less @@ -289,11 +289,9 @@ &__swatches-items { margin-top: 24rpx; width: 100%; - list-style: none; + height: 48rpx; display: flex; - - overflow-x: auto; - overflow-y: auto; + flex-direction: row; &::-webkit-scrollbar { display: none; @@ -301,6 +299,29 @@ height: 0; color: transparent; } + + // 关键：穿透 uni-scroll-view 内部 wrapper，让色块横向排列（H5 only） + :deep(.uni-scroll-view), + :deep(.uni-scroll-view-content) { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + } + + // 关键：隐藏 H5 端 uni-scroll-view 内部真正滚动节点的滚动条 + :deep(.uni-scroll-view) { + &::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + background: transparent; + color: transparent; + } + + // Firefox / 非 webkit 内核 + scrollbar-width: none; + -ms-overflow-style: none; + } } &__swatches-item { @@ -351,7 +372,6 @@ } .transparentBgImage () { - /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; From a768ae282a49320aa32ea6c7ca696f31bd798651 Mon Sep 17 00:00:00 2001 From: tdesign-bot Date: Thu, 18 Jun 2026 09:40:13 +0000 Subject: [PATCH 3/3] chore: stash changelog [ci skip] --- packages/tdesign-miniprogram/.changelog/pr-4521.md | 6 ++++++ packages/tdesign-uniapp/.changelog/pr-4521.md | 7 +++++++ 2 files changed, 13 insertions(+) create mode 100644 packages/tdesign-miniprogram/.changelog/pr-4521.md create mode 100644 packages/tdesign-uniapp/.changelog/pr-4521.md diff --git a/packages/tdesign-miniprogram/.changelog/pr-4521.md b/packages/tdesign-miniprogram/.changelog/pr-4521.md new file mode 100644 index 0000000000..33a59a7bed --- /dev/null +++ b/packages/tdesign-miniprogram/.changelog/pr-4521.md @@ -0,0 +1,6 @@ +--- +pr_number: 4521 +contributor: novlan1 +--- + +- fix(TabBar): 修复 `shape` 为 `round` 时占位高度未包含底部安全区的问题 @novlan1 ([#4521](https://github.com/Tencent/tdesign-miniprogram/pull/4521)) diff --git a/packages/tdesign-uniapp/.changelog/pr-4521.md b/packages/tdesign-uniapp/.changelog/pr-4521.md new file mode 100644 index 0000000000..f37bc49abc --- /dev/null +++ b/packages/tdesign-uniapp/.changelog/pr-4521.md @@ -0,0 +1,7 @@ +--- +pr_number: 4521 +contributor: novlan1 +--- + +- fix(TabBar): 修复 `shape` 为 `round` 时占位高度未包含底部安全区的问题 @novlan1 ([#4521](https://github.com/Tencent/tdesign-miniprogram/pull/4521)) +- fix(ColorPicker): 修复 H5 下预设色彩排列问题 @novlan1 ([#4521](https://github.com/Tencent/tdesign-miniprogram/pull/4521))