fix: 适配华为快应用WebView场景并修复tabbar定位问题
1. 新增华为快应用WebView环境检测工具函数 2. 文章组件在快应用WebView中强制关闭滚动模式 3. 修复全局tabbar在H5/快应用中的定位漂移问题,加固fixed定位样式 4. 补全页面配置中的导航栏标题字段
This commit is contained in:
@@ -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() {
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user