fix: 适配华为快应用WebView场景并修复tabbar定位问题

1. 新增华为快应用WebView环境检测工具函数
2. 文章组件在快应用WebView中强制关闭滚动模式
3. 修复全局tabbar在H5/快应用中的定位漂移问题,加固fixed定位样式
4. 补全页面配置中的导航栏标题字段
This commit is contained in:
2026-07-15 15:00:42 +08:00
parent b10bf472e3
commit 313c283d9b
6 changed files with 270 additions and 85 deletions

View File

@@ -379,9 +379,12 @@ export default {
const v = this.value || {};
return v.scrollMode || 'vertical';
},
// 是否使用滚动模式
useScroll() {
return this.scrollMode !== 'none' && this.list.length > 1;
if (this.scrollMode === 'none') return false;
if (this.list.length <= 1) return false;
// 华为快应用 WebView 强制走非滚动分支
if (this.$util.isHarmonyQuickAppWebview) return false;
return true;
},
// 安全的 display-multiple-items(避免窗口高度 > 内容高度时出现空白)
safeDisplayMultipleItems() {

View File

@@ -281,13 +281,42 @@ export default {
.tab-bar {
background-color: #fff;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
/* ============================================================
* 固定在最底端,不能位置漂移(微信小程序 / 鸿蒙元服务 / 快应用 H5)
* ------------------------------------------------------------
* 现象(只在客户端小程序里复现,浏览器 H5 没事):
* 页面带 navigationStyle:custom + 页面内有 scroll-view,
* 滚到底部时 .tab-bar 会被微信客户端的页面避让逻辑推上去,
* 出现"位置漂移"。
*
* 根因(微信小程序特性):
* 1) 微信小程序里 position:fixed 的 containing block 是 page
* 根容器(不是 viewport),可视区变化时 fixed 元素下沿会
* 跟着重算,造成漂移。
* 2) 父级一旦出现 transform/filter/will-change,fixed 的
* containing block 会被进一步改写,fixed 元素行为更不可控。
*
* 加固措施:
* - bottom: 0 !important 钉死下沿
* - 提升 z-index 到 2147483647,避免被其他 fixed 元素遮挡
* - transform: translateZ(0) 强制提升到独立合成层,降低父级
* transform 干扰;will-change:transform 提示浏览器持续合成
* - 微信小程序里 #ifdef MP-WEIXIN / #ifdef MP-HARMONY 走原生
* tabBar,diy-bottom-nav 通常不会同时存在,但保留兜底
* ============================================================ */
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100%;
z-index: 998;
z-index: 2147483647 !important;
display: flex;
border-top: 2rpx solid #f5f5f5;
/* 强制提升合成层,降低父级 transform/filter 改变 containing block 的概率 */
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
will-change: transform !important;
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);