uview-plus 3.8.108 → 3.8.113

package/changelog.md

@@ -1,3 +1,66 @@
+## 3.8.113（2026-08-27）
+fix: 修复启用uniUpRoot，在root组件存在components选项时组件插入错误
+
+fix: 修复打包APK运行时icon组件未正确获取字体路径
+
+
+## 3.8.112
+feat: navbar 新增 iOS 大标题模式
+
+新增 `mode` 属性，`ios` 值提供现代 iOS 系统应用的导航栏体验：进入页面时导航栏背景透明、标题以 34px 左对齐显示；向下滚动时大标题被压缩进导航栏，标题过渡为常规居中形态，同时出现毛玻璃磨砂背景。
+
+- 新增 `mode` 属性，可选 `default`（默认）与 `ios`，非法值按 `default` 处理
+- 新增 `scrollTop` 属性接收页面滚动距离，需由页面 `onPageScroll` 传入；不传时停留在大标题展开态
+- 大标题渲染在 in-flow 层靠原生滚动位移，不经过 JS，小程序端不会因 setData 回程产生拖影
+- 磨砂采用 0.82 不透明底色叠加 `backdrop-filter`：支持的端得到真实毛玻璃，不支持的端仍有 82% 不透明底色兜住文字可读性
+- 玻璃与居中标题的透明度曲线分段递进（0-0.5 与 0.75-1），确保任何滚动位置都不出现两段标题文字互相透出
+- 居中标题在淡入的同时由下方 12px 上浮就位，并带 0.15s 过渡补齐离散滚动事件之间的空隙
+- 新增 `--up-navbar-glass-bg-color` 与 `--up-navbar-glass-blur` 主题变量，跟随明暗模式切换
+- 新增 verify:navbar-ios-mode 校验脚本
+
+已知边界：`ios` 模式下 `fixed` 与 `placeholder` 被忽略——固定层恒定固定，in-flow 层恒定渲染，因为该层承载的是大标题这一实际内容而非可选占位。nvue 端因缺少 filter 管线、页面非原生滚动容器、`onPageScroll` 不可靠三项约束，传入 `mode="ios"` 时整体降级为 `default`。
+
+`default` 模式的结构、样式与属性语义完全不变。
+
+## 3.8.111
+fix: 修复小程序端使用交叉观察器组件时控制台报枚举实例键告警（#864）
+
+小程序端 `uni.createIntersectionObserver(this)` 会把 Vue 实例代理直接透传给原生 API，原生内部的 `Object.keys(vm)` 命中 Vue 开发模式下的 ownKeys 拦截，从而输出告警：
+`[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance.`
+根因是 uni-app 只为 `createSelectorQuery` 做了 `$scope` 解包，一直没有为 `createIntersectionObserver` 做同样处理。
+
+- 新增 `upCreateIntersectionObserver(comp, options)` 公共方法：优先调用组件实例上的同名方法（内部已完成实例解包，不会外泄代理），APP 端实例上没有该方法时回退到全局 API
+- u-lazy-load、u-sticky、u-cate-tab 三个组件改用该方法，小程序端不再产生告警
+- u-sticky 的 `thresholds: [0.95, 0.98, 1]` 原样透传。注意不能改传 `comp.$scope`：APP 端页面的 `$scope` 仅为 `{ $getAppWebview }`，会被全局 API 误判成 options 参数，导致真实配置被静默丢弃
+- u-parse/node 的观察器位于 `#ifdef H5 || APP-PLUS` 条件编译块内，不会编译进小程序，故保持不变
+- 补充 `upCreateIntersectionObserver` 类型定义，新增 verify:up-create-intersection-observer 校验脚本
+
+组件对外行为不变，APP 端调用路径与配置均保持原样。
+
+## 3.8.110
+feat: cropper 支持外部图片路径直接裁剪（#897）
+
+- `chooseImage` 第二个参数新增 `imageSrc`，可传业务拍照或选图得到的本地临时路径并直接开始裁剪
+- 有效 `imageSrc` 会跳过组件内置 `uni.chooseImage`；未传、空字符串或非字符串仍保持原选图行为
+- 外部路径与系统选图复用同一套图片信息读取、裁剪框初始化和绘制流程
+- “重选”按钮仍打开系统图片选择器；远程地址继续受目标平台读取能力和 H5 跨域限制
+
+## 3.8.109
+feat: popup 关闭事件补齐，新增 closed 事件（#902）
+
+close 此前只在点击遮罩、点击关闭图标时发出。外部直接把 show 置为 false 时组件内部没有走过关闭动作，不会发出任何事件，业务侧就少了一个"弹窗已关闭"的统一监听点。
+
+- u-popup: show 由 true 变 false 时补发 close，任意关闭方式都能被监听到。内部关闭走 emitClose()，它先同步置位去重标记再 emit，因此下游在 close 的同步 handler 里修改 show 数据源不会被误判成外部关闭而重复发出
+- u-popup: 新增 closed 事件，接 u-transition 已有但一直无人监听的 afterLeave，在离场动画结束、弹窗真正消失后发出。close 是"开始关闭"，closed 是"已关闭"
+- pageInline 模式下 transition 的 show 恒为 true、不执行离场动画，收不到 afterLeave，改由 watch 补发 closed
+- closed 透传到 u-picker、u-datetime-picker、u-action-sheet、u-keyboard、u-calendar、u-color-picker、u-picker-data、u-goods-sku。其中 u-datetime-picker、u-picker-data 包裹的是 u-picker，属二级透传；u-calendar 只从主体 popup 转发，关闭内部时间选择器不会误报
+- 补充 popup/picker/datetimePicker/actionSheet/keyboard/calendar 的 onClosed 类型定义
+- 新增 verify:popup-close-events 校验脚本
+
+组件保持纯受控，渲染只依赖 show prop，未引入内部副本，老用户行为不变。
+
+已知取舍：业务在 close 里跨 nextTick 才把 show 置为 false 时，close 会发两次。去重标记只在当次更新周期内有效是刻意的，否则残留标记会吞掉后续真实的关闭事件。这类异步确认场景应改用 closed，它只在弹窗真正消失时发出一次。
+
 ## 3.8.108（2026-08-18）
 fix: 修复鸿蒙二维码不显示、海报文字不换行等绘图问题
 

package/components/u-action-sheet/u-action-sheet.vue

@@ -3,6 +3,7 @@
 	    :show="show"
 	    mode="bottom"
 	    @close="closeHandler"
+	    @closed="$emit('closed')"
 	    :safeAreaInsetBottom="safeAreaInsetBottom"
 	    :round="round"
 	>
@@ -156,6 +157,7 @@
 	 * 
 	 * @event {Function} select			点击ActionSheet列表项时触发 
 	 * @event {Function} close			点击取消按钮时触发
+	 * @event {Function} closed			弹窗已关闭（离场动画结束、弹窗真正消失后）触发
 	 * @event {Function} getuserinfo	用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效
 	 * @event {Function} contact		客服消息回调，openType="contact"时有效
 	 * @event {Function} getphonenumber	获取用户手机号回调，openType="getPhoneNumber"时有效
@@ -224,7 +226,7 @@
 				})
 			}
 		},
-		emits: ["close", "select", "update:show"],
+		emits: ["close", "closed", "select", "update:show"],
 		methods: {
 			// 关闭操作菜单事件处理
 			closeHandler() {

package/components/u-calendar/u-calendar.vue

@@ -12,6 +12,7 @@
 		:bgColor="bgColor"
 		:closeable="!pageInline"
 		@close="close"
+		@closed="$emit('closed')"
 		:round="round"
 		:pageInline="pageInline"
 		:closeOnClickOverlay="closeOnClickOverlay"
@@ -236,6 +237,7 @@ import { t } from '../../libs/i18n'
  *
  * @event {Function()} confirm 		点击确定按钮时触发		选择日期相关的返回参数
  * @event {Function()} close 		日历关闭时触发			可定义页面关闭时的回调事件
+ * @event {Function()} closed 	日历已关闭（离场动画结束、弹窗真正消失后）触发
  * @example <u-calendar  :defaultDate="defaultDateMultiple" :show="show" mode="multiple" @confirm="confirm">
 	</u-calendar>
  * */
@@ -411,7 +413,7 @@ export default {
 		this.start = Date.now()
 		this.init()
 	},
-	emits: ["confirm", "close"],
+	emits: ["confirm", "close", "closed"],
 	methods: {
 		addUnit,
 		padTime(num) {

package/components/u-cate-tab/u-cate-tab.vue

@@ -47,7 +47,7 @@
 	</view>
 </template>
 <script>
-	import { addUnit, sleep } from '../../libs/function/index';
+	import { addUnit, sleep, upCreateIntersectionObserver } from '../../libs/function/index';
 	export default {
 		name: 'up-cate-tab',
         props: {
@@ -179,7 +179,7 @@
 				this._observerList = [];
 				
 				this.tabList.map((val, index) => {
-					let observer = uni.createIntersectionObserver(this);
+					let observer = upCreateIntersectionObserver(this);
 					this._observerList.push(observer);
 					// 检测相交状态
 					observer.relativeTo('.u-cate-tab__right-box', {

package/components/u-color-picker/u-color-picker.vue

@@ -4,7 +4,7 @@
             :style="{backgroundColor: value}" >
             <slot></slot>
         </view>
-		<up-popup :show="show" mode="bottom" round="10" @close="close" :closeOnClickOverlay="true">
+		<up-popup :show="show" mode="bottom" round="10" @close="close" @closed="$emit('closed')" :closeOnClickOverlay="true">
 			<view class="up-color-picker__content">
 				<view class="up-color-picker__header">
 					<text class="up-color-picker__title">选择颜色</text>
@@ -267,7 +267,7 @@ export default {
 	mounted() {
 		this.initColor()
 	},
-    emits: ['update:modelValue', 'confirm', 'close'],
+    emits: ['update:modelValue', 'confirm', 'close', 'closed'],
 	methods: {
 		// 初始化颜色
 		initColor() {

package/components/u-cropper/u-cropper.vue

@@ -221,68 +221,71 @@
 				}
 				this.hideImg();
 			},
-			select() {
-				if (this.fSelecting) return;
-				this.fSelecting = true;
-				setTimeout(() => { this.fSelecting = false; }, 500);
-				const self = this
-				uni.chooseImage({
-					count: 1,
-					sizeType: ['original', 'compressed'],
-					sourceType: ['album', 'camera'],
-					success: (r) => {
-						uni.showLoading({ mask: true });
-						let path = this.imgPath = r.tempFilePaths[0];
-						uni.getImageInfo({
-							src: path,
-							success: r => {
-								this.imgWidth = r.width;
-								this.imgHeight = r.height;
-								this.path = path;
-								if (!this.hasSel) {
-									let style = this.selStyle || {};
-									if (this.arWidth && this.arHeight) {
-										let areaWidth = this.arWidth.indexOf('rpx') >= 0 ? parseInt(this.arWidth) * this.pxRatio : parseInt(this.arWidth),
-											areaHeight = this.arHeight.indexOf('rpx') >= 0 ? parseInt(this.arHeight) * this.pxRatio : parseInt(this.arHeight);
-										style.width = areaWidth + 'px';
-										style.height = areaHeight + 'px';
-										style.top = (this.windowHeight - areaHeight - tabHeight) / 2 + 'px';
-										style.left = (this.windowWidth - areaWidth) / 2 + 'px';
-									} else {
-										uni.showModal({
-											title: t("up.cropper.emptyWidhtOrHeight"),
-											showCancel: false
-										})
-										return;
-									}
-									this.selStyle = style;
-								}
-
-								if (this.noBar) {
-									this.drawInit(true);
-								} else {
-									uni.hideTabBar({
-										complete: () => {
-											this.drawInit(true);
-										}
-									});
-								}
-							},
-							fail: () => {
-								uni.showToast({
-									title: "error3",
-									duration: 2000,
-								})
-							},
-							complete() {
-								uni.hideLoading();
-							}
-						});
-					}, fail(err) {
-						self.$emit('cancel')
-					}
-				})
-			},
+			loadImage(path) {
+				uni.showLoading({ mask: true });
+				this.imgPath = path;
+				uni.getImageInfo({
+					src: path,
+					success: r => {
+						this.imgWidth = r.width;
+						this.imgHeight = r.height;
+						this.path = path;
+						if (!this.hasSel) {
+							let style = this.selStyle || {};
+							if (this.arWidth && this.arHeight) {
+								let areaWidth = this.arWidth.indexOf('rpx') >= 0 ? parseInt(this.arWidth) * this.pxRatio : parseInt(this.arWidth),
+									areaHeight = this.arHeight.indexOf('rpx') >= 0 ? parseInt(this.arHeight) * this.pxRatio : parseInt(this.arHeight);
+								style.width = areaWidth + 'px';
+								style.height = areaHeight + 'px';
+								style.top = (this.windowHeight - areaHeight - tabHeight) / 2 + 'px';
+								style.left = (this.windowWidth - areaWidth) / 2 + 'px';
+							} else {
+								uni.showModal({
+									title: t("up.cropper.emptyWidhtOrHeight"),
+									showCancel: false
+								})
+								return;
+							}
+							this.selStyle = style;
+						}
+
+						if (this.noBar) {
+							this.drawInit(true);
+						} else {
+							uni.hideTabBar({
+								complete: () => {
+									this.drawInit(true);
+								}
+							});
+						}
+					},
+					fail: () => {
+						uni.showToast({
+							title: "error3",
+							duration: 2000,
+						})
+					},
+					complete() {
+						uni.hideLoading();
+					}
+				});
+			},
+			select() {
+				if (this.fSelecting) return;
+				this.fSelecting = true;
+				setTimeout(() => { this.fSelecting = false; }, 500);
+				uni.chooseImage({
+					count: 1,
+					sizeType: ['original', 'compressed'],
+					sourceType: ['album', 'camera'],
+					success: (r) => {
+						this.loadImage(r.tempFilePaths[0]);
+					},
+					fail: () => {
+						this.$emit('cancel')
+					}
+				})
+			},
 			async confirm() {
 				if (this.fUploading) return;
 				this.fUploading = true;
@@ -725,9 +728,10 @@
 						uni.hideLoading();
 					}
 				});
-			},
-			chooseImage(index = undefined, params = undefined, data = undefined) {
-				if (params) {
+			},
+			chooseImage(index = undefined, params = undefined, data = undefined) {
+				const imageSrc = typeof params?.imageSrc === 'string' ? params.imageSrc.trim() : '';
+				if (params) {
 					console.log(params)
 					let areaWidth = params.areaWidth || this.areaWidth,
 						areaHeight = params.areaHeight || this.areaHeight,
@@ -774,11 +778,15 @@
 						// console.log(this.selStyle);
 						this.hasSel = true;
 					}
-				}
-				this.rtn = data;
-				this.indx = index;
-				this.select();
-			},
+				}
+				this.rtn = data;
+				this.indx = index;
+				if (imageSrc) {
+					this.loadImage(imageSrc);
+					return;
+				}
+				this.select();
+			},
 			rotate() {
 				// #ifdef APP-PLUS
 				if (this.platform === 'android') {

package/components/u-datetime-picker/u-datetime-picker.vue

@@ -33,6 +33,7 @@
 			:maskClass="maskClass"
 			:maskStyle="resolvedMaskStyle"
             @close="close"
+            @closed="$emit('closed')"
             @cancel="cancel"
             @confirm="confirm"
             @change="change"
@@ -93,6 +94,7 @@
 	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭选择器  ( 默认 false )
 	 * @property {Array}			defaultIndex		各列的默认索引
 	 * @event {Function} close 关闭选择器时触发
+	 * @event {Function} closed 选择器已关闭（离场动画结束、弹窗真正消失后）触发
 	 * @event {Function} confirm 点击确定按钮，返回当前选择的值
 	 * @event {Function} change 当选择值变化时触发
 	 * @event {Function} cancel 点击取消按钮
@@ -191,7 +193,7 @@
 			}
 		},
 		// #ifdef VUE3
-		emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue'],
+		emits: ['close', 'closed', 'cancel', 'confirm', 'change', 'update:modelValue'],
 		// #endif
 		methods: {
 			toInt(value, fallback = 0) {

package/components/u-goods-sku/u-goods-sku.vue

@@ -10,6 +10,7 @@
             :pageInline="pageInline"
             :border-radius="20"
             @close="close"
+            @closed="$emit('closed')"
         >
             <view class="up-goods-sku-container" :style="{padding: pageInline ? '0px' : ''}">
                 <view class="up-goods-sku__header">
@@ -175,7 +176,7 @@
 		},
 		watch: {
 		},
-        emits: ['open', 'confirm', 'close'],
+        emits: ['open', 'confirm', 'close', 'closed'],
         created() {
             if (this.pageInline) {
                 this.show = true;

package/components/u-icon/util.js

@@ -44,7 +44,8 @@ const getAppIconUrl = () => {
     }
     if (typeof plus !== 'undefined' && plus.io && typeof plus.io.convertLocalFileSystemURL === 'function') {
         const iconFontPath = plus.io.convertLocalFileSystemURL(appIconFontUrl);
-        if (iconFontPath) return iconFontPath;
+        // if (iconFontPath) return iconFontPath;
+        return iconFontPath && iconFontPath.startsWith('file://') ? iconFontPath : 'file://' + iconFontPath;
     }
     return appIconFontUrl;
     // #endif

package/components/u-keyboard/u-keyboard.vue

@@ -7,6 +7,7 @@
 	    :show="show"
 	    :safeAreaInsetBottom="safeAreaInsetBottom"
 	    @close="popupClose"
+	    @closed="$emit('closed')"
 	    :zIndex="zIndex"
 	    :customStyle="popupStyle"
 	>
@@ -111,7 +112,7 @@
 				}
 			}
 		},
-		emits: ["change", "close", "confirm", "cancel", "backspace"],
+		emits: ["change", "close", "closed", "confirm", "cancel", "backspace"],
 		methods: {
 			change(e) {
 				this.$emit('change', e);

package/components/u-lazy-load/u-lazy-load.vue

@@ -20,7 +20,8 @@
     import {
         addUnit,
         guid,
-        rpx2px
+        rpx2px,
+        upCreateIntersectionObserver
     } from '../../libs/function/index.js';
     /**
      * lazyLoad 懒加载
@@ -211,10 +212,11 @@
            
             setTimeout(() => {
                 // #ifndef APP-NVUE
-                // 这里是组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver
+                // 这里是组件内获取布局状态，不能直传Vue实例给uni.createIntersectionObserver，
+                // 否则小程序内部会Object.keys(vm)导致告警，统一走upCreateIntersectionObserver
                 // this.disconnectObserver('contentObserver');
                 // nvue 里不支持
-                const contentObserver = uni.createIntersectionObserver(this);
+                const contentObserver = upCreateIntersectionObserver(this);
                 // 要理解这里怎么计算的，请看这个：
                 // https://blog.csdn.net/qq_25324335/article/details/83687695
                 contentObserver.relativeToViewport({

package/components/u-navbar/navbar.js

@@ -26,7 +26,9 @@ export default {
 		leftIconSize: 20,
 		leftIconColor: '',
 		autoBack: false,
-		titleStyle: ''
+		titleStyle: '',
+		mode: 'default',
+		scrollTop: 0
     }
 
 }

package/components/u-navbar/props.js

@@ -94,6 +94,16 @@ export const props = defineMixin({
 		titleStyle: {
 			type: [String, Object],
 			default: () => defProps.navbar.titleStyle
+		},
+		// 导航栏模式，default-常规，ios-大标题磨砂模式
+		mode: {
+			type: String,
+			default: () => defProps.navbar.mode
+		},
+		// 页面滚动距离，仅 ios 模式使用，由页面 onPageScroll 传入
+		scrollTop: {
+			type: [String, Number],
+			default: () => defProps.navbar.scrollTop
 		}
 	}
 })

package/components/u-navbar/theme-vars.scss

@@ -2,6 +2,8 @@
 page,
 body {
 	--up-navbar-bg-color: #ffffff;
+	--up-navbar-glass-bg-color: rgba(255, 255, 255, 0.82);
+	--up-navbar-glass-blur: 20px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -9,13 +11,16 @@ body {
 	page,
 	body {
 		--up-navbar-bg-color: #1c1c1e;
+		--up-navbar-glass-bg-color: rgba(28, 28, 30, 0.82);
 	}
 }
 
 [data-up-theme='light'] {
 	--up-navbar-bg-color: #ffffff;
+	--up-navbar-glass-bg-color: rgba(255, 255, 255, 0.82);
 }
 
 [data-up-theme='dark'] {
 	--up-navbar-bg-color: #1c1c1e;
+	--up-navbar-glass-bg-color: rgba(28, 28, 30, 0.82);
 }

package/components/u-navbar/u-navbar.vue

@@ -1,21 +1,47 @@
 <template>
 	<view class="u-navbar" :class="[customClass]">
+		<!-- ios 模式：in-flow 层，恒定渲染，随页面原生滚动被带走 -->
+		<view
+			v-if="isIosMode"
+			class="u-navbar__flow"
+		>
+			<view :style="{ height: navbarFlowSpacerHeight }"></view>
+			<view
+				v-if="title"
+				class="u-navbar__large-title"
+				:style="{ height: addUnit(largeTitleHeight) }"
+			>
+				<text
+					class="u-line-1 u-navbar__large-title__text"
+					:style="[{ color: navbarTitleColor }, addStyle(titleStyle)]"
+				>{{ title }}</text>
+			</view>
+		</view>
+		<!-- default 模式：原有占位块，行为保持不变 -->
 		<view
 			class="u-navbar__placeholder"
-			v-if="fixed && placeholder"
+			v-if="!isIosMode && fixed && placeholder"
 			:style="{
 				height: addUnit(getPx(height) + getWindowInfo().statusBarHeight,'px'),
 			}"
 		></view>
 		<view
 			class="u-navbar__inner"
-			:class="[fixed && 'u-navbar--fixed']"
+			:class="[(isIosMode || fixed) && 'u-navbar--fixed']"
 			:style="[navbarInnerStyle]"
 		>
+			<view
+				v-if="isIosMode"
+				class="u-navbar__glass"
+				:style="{
+					opacity: navbarGlassOpacity,
+					background: navbarGlassBgColor,
+				}"
+			></view>
 			<u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
 			<view
 				class="u-navbar__content"
-				:class="[border && 'u-border-bottom']"
+				:class="[border && !isIosMode && 'u-border-bottom']"
 				:style="{
 					height: addUnit(height),
 					backgroundColor: 'transparent',
@@ -43,15 +69,20 @@
 						>{{ leftText }}</text>
 					</slot>
 				</view>
-				<slot name="center">
-					<text
-						class="u-line-1 u-navbar__content__title"
-						:style="[{
-							width: addUnit(titleWidth),
-							color: navbarTitleColor,
-						}, addStyle(titleStyle)]"
-					>{{ title }}</text>
-				</slot>
+				<view
+					class="u-navbar__content__center"
+					:style="[navbarCenterStyle]"
+				>
+					<slot name="center">
+						<text
+							class="u-line-1 u-navbar__content__title"
+							:style="[{
+								width: addUnit(titleWidth),
+								color: navbarTitleColor,
+							}, addStyle(titleStyle)]"
+						>{{ title }}</text>
+					</slot>
+				</view>
 				<view
 					class="u-navbar__content__right"
 					v-if="$slots.right || rightIcon || rightText"
@@ -82,6 +113,12 @@
 	import { mixin } from '../../libs/mixin/mixin';
 	import config  from '../../libs/config/config';
 	import { addUnit, addStyle, getPx, getWindowInfo } from '../../libs/function/index';
+
+	// iOS 大标题行高。它同时是 navbarProgress 的分母，
+	// 因此改动此值会同步改变压缩过程的滚动区间。
+	const LARGE_TITLE_HEIGHT = 52
+	// 居中标题上浮的起始偏移，与淡入同步归零
+	const CENTER_TITLE_RISE = 12
 	/**
 	 * Navbar 自定义导航栏
 	 * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
@@ -104,6 +141,8 @@
 	 * @property {String | Number}	leftIconColor		左侧返回图标的颜色（默认 #303133 ）
 	 * @property {Boolean}	        autoBack			点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
 	 * @property {Object | String}	titleStyle			标题的样式，对象或字符串
+	 * @property {String}			mode				导航栏模式，default-常规，ios-大标题磨砂模式（默认 'default' ）
+	 * @property {String | Number}	scrollTop			页面滚动距离，仅 ios 模式使用，由页面 onPageScroll 传入（默认 0 ）
 	 * @event {Function} leftClick		点击左侧区域
 	 * @event {Function} rightClick		点击右侧区域
 	 * @example <u-navbar title="剑未配妥，出门已是江湖" left-text="返回" right-text="帮助" @click-left="onClickBack" @click-right="onClickRight"></u-navbar>
@@ -116,6 +155,60 @@
 			}
 		},
 		computed: {
+			isIosMode() {
+				// nvue 缺少 filter 管线、页面非原生滚动容器、onPageScroll 不可靠，
+				// 三条约束任意一条都足以让 ios 模式失效，整体降级为 default。
+				// 注意 APP-NVUE 在 app-harmony 上为 false，harmony 走 ArkWeb 应获得完整 ios 模式。
+				// #ifdef APP-NVUE
+				return false
+				// #endif
+				// #ifndef APP-NVUE
+				return this.mode === 'ios'
+				// #endif
+			},
+			// 有效大标题行高：title 为空时不渲染大标题行，行高塌陷为 0
+			largeTitleHeight() {
+				return this.title ? LARGE_TITLE_HEIGHT : 0
+			},
+			// in-flow 层顶部让位块高度，为固定层腾出空间
+			navbarFlowSpacerHeight() {
+				const statusBarHeight = this.safeAreaInsetTop ? getWindowInfo().statusBarHeight : 0
+				return addUnit(getPx(this.height) + statusBarHeight, 'px')
+			},
+			// 压缩进度。分母取有效大标题行高，progress=1 即大标题恰好完全没入导航栏
+			navbarProgress() {
+				if (!this.isIosMode) return 1
+				const height = this.largeTitleHeight
+				if (height <= 0) return 1
+				const offset = getPx(this.scrollTop) || 0
+				return Math.min(Math.max(offset / height, 0), 1)
+			},
+			// 磨砂在前半段走完，为居中标题的出现铺好不透明底
+			navbarGlassOpacity() {
+				if (!this.isIosMode) return 0
+				return Math.min(Math.max(this.navbarProgress / 0.5, 0), 1)
+			},
+			// 居中标题在后段才启动，此时玻璃已满不透明，不会与大标题互相透出
+			navbarCenterOpacity() {
+				if (!this.isIosMode) return 1
+				return Math.min(Math.max((this.navbarProgress - 0.75) / 0.25, 0), 1)
+			},
+			// 居中标题由下往上浮现：与淡入同一段行程，位移随之归零
+			navbarCenterStyle() {
+				if (!this.isIosMode) return {}
+				const opacity = this.navbarCenterOpacity
+				return {
+					opacity,
+					transform: `translateY(${(1 - opacity) * CENTER_TITLE_RISE}px)`
+				}
+			},
+			navbarGlassBgColor() {
+				// 0.82 是可读性下限的承重值：backdrop-filter 不生效时，
+				// 仅靠这个不透明度也必须保证文字不与下方内容读串。
+				return this.bgColor
+					|| this.upThemeVar('--up-navbar-glass-bg-color',
+						this.upThemeIsDark ? 'rgba(28, 28, 30, 0.82)' : 'rgba(255, 255, 255, 0.82)')
+			},
 			navbarBgColor() {
 				if (this.bgColor) return this.bgColor
 				return this.upThemeVar('--up-navbar-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
@@ -134,6 +227,11 @@
 			navbarInnerStyle() {
 				const style = {}
 				style.background = this.navbarBgColor
+				// ios 模式下固定层必须透明，否则 backdrop-filter 采样到自身底色，模糊不出内容。
+				// 背景由独立的 __glass 层承担，随滚动淡入。
+				if (this.isIosMode) {
+					style.background = 'transparent'
+				}
 				return style
 			}
 		},
@@ -179,12 +277,46 @@
 			z-index: 11;
 		}
 
+		&__flow {
+			/* #ifndef APP-NVUE */
+			width: 100%;
+			/* #endif */
+		}
+
+		&__large-title {
+			@include flex(row);
+			align-items: center;
+			padding: 0 13px;
+
+			&__text {
+				font-size: 34px;
+				font-weight: 700;
+				line-height: 1.2;
+			}
+		}
+
+		&__glass {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			// 模糊半径写在静态 class 内而非 :style 绑定，使 -webkit- 前缀在编译期确定。
+			// iOS 16 之前的 WKWebView 只认前缀版本，两条都必须保留。
+			// CSS 变量不被支持时回落到字面量 20px。
+			-webkit-backdrop-filter: saturate(180%) blur(var(--up-navbar-glass-blur, 20px));
+			        backdrop-filter: saturate(180%) blur(var(--up-navbar-glass-blur, 20px));
+		}
+
 		&__content {
 			@include flex(row);
 			align-items: center;
 			height: 44px;
 			background-color: $u-bg-color;
+			// 玻璃层是绝对定位的，会盖住同级的非定位元素。
+			// 缺少这两行的表现是整个导航栏内容不可见。
 			position: relative;
+			z-index: 1;
 			justify-content: center;
 
 			&__left,
@@ -211,6 +343,17 @@
 				}
 			}
 
+			&__center {
+				@include flex(row);
+				align-items: center;
+				justify-content: center;
+				// 滚动事件是离散到达的，补一段短过渡让上浮与淡入连续。
+				// 时长刻意短于一次滚动事件的间隔，避免落后于手指。
+				/* #ifndef APP-NVUE */
+				transition: opacity 0.15s linear, transform 0.15s ease-out;
+				/* #endif */
+			}
+
 			&__title {
 				text-align: center;
 				font-size: 16px;

package/components/u-picker/u-picker.vue

@@ -23,6 +23,7 @@
 			:pageInline="pageInline"
 			:overlayOpacity="overlayOpacity"
 			@close="closeHandler"
+			@closed="$emit('closed')"
 		>
 			<view class="u-picker">
 				<u-toolbar
@@ -108,6 +109,7 @@
  * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
  * @property {String | Number}	overlayDuration		遮罩层动画时长，单位ms （默认 350 ）
  * @event {Function} close		关闭选择器时触发
+ * @event {Function} closed		选择器已关闭（离场动画结束、弹窗真正消失后）触发
  * @event {Function} cancel		点击取消按钮触发
  * @event {Function} change		当选择值变化时触发
  * @event {Function} confirm	点击确定按钮，返回当前选择的值
@@ -195,7 +197,7 @@ export default {
 			}
 		}
 	},
-	emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue', 'update:show'],
+	emits: ['close', 'closed', 'cancel', 'confirm', 'change', 'update:modelValue', 'update:show'],
     computed: {
 		// input的props
 		inputPropsInner() {

package/components/u-picker-data/u-picker-data.vue

@@ -20,7 +20,8 @@
 			:defaultIndex="defaultIndex"
 			@confirm="confirm"
 			@cancel="cancel"
-			@close="close">
+			@close="close"
+			@closed="$emit('closed')">
 		</up-picker>
 	</view>
 </template>
@@ -95,7 +96,7 @@ export default {
 			return [this.options];
 		}
 	},
-    emits: ['update:modelValue', 'cancel', 'close', 'confirm'],
+    emits: ['update:modelValue', 'cancel', 'close', 'closed', 'confirm'],
     methods: {
         hideKeyboard() {
             uni.hideKeyboard()

package/components/u-popup/u-popup.vue

@@ -25,6 +25,7 @@
 			:mode="pageInline ? 'none' : position"
 			:duration="duration"
 			@afterEnter="afterEnter"
+			@afterLeave="afterLeave"
 			@click="clickHandler"
 		>
 			<!-- @click.stop不能去除，去除会导致居中模式下点击内容区域触发关闭弹窗 -->
@@ -99,8 +100,9 @@
 	 * @property {String}			minHeight			最小高度，单位任意，数值默认为px（默认 '200px' ）
 	 * @property {String}			maxHeight			最大高度，单位任意，数值默认为px（默认 '80%' ）
 	 * @property {Object}			customStyle			组件的样式，对象形式
-	 * @event {Function} open 弹出层打开
-	 * @event {Function} close 弹出层收起
+	 * @event {Function} open 弹出层打开（进场动画结束后）
+	 * @event {Function} close 弹出层收起（关闭动作发生时，离场动画开始前；外部直接将show置为false时也会触发）
+	 * @event {Function} closed 弹出层已关闭（离场动画结束、弹窗真正消失后）
 	 * @example <u-popup v-model:show="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
 	 */
 	export default {
@@ -109,6 +111,8 @@
 		data() {
 			return {
 				overlayDuration: this.duration + 50,
+				// close事件是否已由组件内部的关闭动作发出，避免show变化时重复发出
+				closeEmitted: false,
 				// 触摸相关数据
 				touchStartY: 0,
 				touchStartHeight: 0,
@@ -120,10 +124,25 @@
 		watch: {
 			show(newValue, oldValue) {
 				if (newValue === true) {
+					this.closeEmitted = false
 					// #ifdef MP-WEIXIN
 					const children = this.$children
 					this.retryComputedComponentRect(children)
 					// #endif
+				} else if (oldValue === true) {
+					// 外部直接将show置为false时，组件内部没有走过关闭动作，
+					// 此处补发close，保证任意关闭方式都能被监听到
+					if (this.closeEmitted) {
+						// 本次关闭已由内部动作发出过close，消费标记即可
+						this.closeEmitted = false
+					} else {
+						this.$emit('close')
+					}
+					// pageInline模式下transition的show恒为true，不会执行离场动画，
+					// 收不到afterLeave，此处按动画时长补发closed
+					if (this.pageInline) {
+						this.$emit('closed')
+					}
 				}
 			}
 		},
@@ -238,25 +257,39 @@
 				}
 			},
 		},
-		emits: ["open", "close", "click", "update:show"],
+		emits: ["open", "close", "closed", "click", "update:show"],
 		methods: {
+			// 发出close事件。标记仅在本次更新周期内有效，
+			// 用于抑制紧随其后的show变化导致watch重复补发close
+			emitClose() {
+				this.closeEmitted = true
+				this.$emit('close')
+				this.$nextTick(() => {
+					this.closeEmitted = false
+				})
+			},
 			// 点击遮罩
 			overlayClick() {
 				if (this.closeOnClickOverlay) {
 					this.$emit('update:show', false)
-					this.$emit('close')
+					this.emitClose()
 				}
 			},
 			open(e) {
+				this.closeEmitted = false
 				this.$emit('update:show', true)
 			},
 			close(e) {
 				this.$emit('update:show', false)
-				this.$emit('close')
+				this.emitClose()
 			},
 			afterEnter() {
 				this.$emit('open')
 			},
+			// 离场动画结束，弹窗已真正消失
+			afterLeave() {
+				this.$emit('closed')
+			},
 			clickHandler() {
 				// 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
 				if(this.mode === 'center') {

package/components/u-sticky/u-sticky.vue

@@ -17,7 +17,7 @@
 	import { props } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
-	import { addUnit, addStyle, deepMerge, getPx, guid, getDeviceInfo, os } from '../../libs/function/index';
+	import { addUnit, addStyle, deepMerge, getPx, guid, getDeviceInfo, os, upCreateIntersectionObserver } from '../../libs/function/index';
 	import zIndex from '../../libs/config/zIndex';
 	/**
 	 * sticky 吸顶
@@ -119,7 +119,7 @@
 			observeContent() {
 				// 先断掉之前的观察
 				this.disconnectObserver('contentObserver')
-				const contentObserver = uni.createIntersectionObserver(this,{
+				const contentObserver = upCreateIntersectionObserver(this, {
 					// 检测的区间范围
 					thresholds: [0.95, 0.98, 1]
 				})

package/libs/function/index.js

@@ -70,6 +70,23 @@ export function upGetRect(selector, all = false, comp = null) {
 	})
 }
 
+// 创建交叉观察器
+// 小程序端 uni.createIntersectionObserver(vm) 会把 Vue 实例代理直接透传给原生 API，
+// 原生内部的 Object.keys(vm) 会触发告警：
+// Avoid app logic that relies on enumerating keys on a component instance
+// （uni-app 只给 createSelectorQuery 做了 $scope 解包，没给 createIntersectionObserver 做）
+// 组件实例上的同名方法内部使用 $scope（原生组件实例），不会把代理外泄，因此优先使用
+export function upCreateIntersectionObserver(comp, options) {
+	// 各家小程序与 H5 都在组件实例上暴露了该方法，内部已完成实例解包
+	if (comp && typeof comp.createIntersectionObserver === 'function') {
+		return options ? comp.createIntersectionObserver(options) : comp.createIntersectionObserver()
+	}
+	// APP 端未在实例上暴露该方法，退回全局 API，其内部会自行解析实例，本身不产生告警
+	// 注意：不能传 comp.$scope，APP 端页面的 $scope 仅为 { $getAppWebview }，
+	// 会被全局 API 误判成 options 参数从而丢失真实配置
+	return options ? uni.createIntersectionObserver(comp, options) : uni.createIntersectionObserver(comp)
+}
+
 /**
  * @description 如果value小于min，取min；如果value大于max，取max
  * @param {number} min 
@@ -907,6 +924,7 @@ function hslToHex(h, s, l) {
 
 export default {
 	upGetRect,
+	upCreateIntersectionObserver,
 	range,
 	getPx,
 	sleep,

package/libs/root/root.js

@@ -7,7 +7,9 @@ function ensureRootToastHostComponent(ms, scriptContent) {
   if (componentsMatch && /\bUpRootToastHost\b/.test(componentsMatch[1])) return
 
   if (componentsMatch) {
-    ms.appendLeft(componentsMatch.index + componentsMatch[0].length, ' UpRootToastHost,')
+    // ms.appendLeft(componentsMatch.index + componentsMatch[0].length, ' UpRootToastHost,')
+    const openBraceIndex = componentsMatch.index + componentsMatch[0].indexOf('{')
+    ms.appendLeft(openBraceIndex + 1, ' UpRootToastHost,')
     return
   }
 

package/libs/theme/runtime.js

@@ -12,6 +12,8 @@ const FALLBACK_THEME_VARS = {
         '--up-page-bg-color': '#f3f4f6',
         '--up-card-bg-color': '#ffffff',
         '--up-navbar-bg-color': '#ffffff',
+        '--up-navbar-glass-bg-color': 'rgba(255, 255, 255, 0.82)',
+        '--up-navbar-glass-blur': '20px',
         '--up-table2-header-bg-color': '#f5f7fa',
         '--up-table2-zebra-bg-color': '#fafafa',
         '--up-table2-highlight-bg-color': '#f5f7fa',
@@ -54,6 +56,8 @@ const FALLBACK_THEME_VARS = {
         '--up-page-bg-color': '#1f1f1f',
         '--up-card-bg-color': '#1c1c1e',
         '--up-navbar-bg-color': '#1c1c1e',
+        '--up-navbar-glass-bg-color': 'rgba(28, 28, 30, 0.82)',
+        '--up-navbar-glass-blur': '20px',
         '--up-table2-header-bg-color': '#2a2d33',
         '--up-table2-zebra-bg-color': '#23262b',
         '--up-table2-highlight-bg-color': '#2f3440',

package/libs/theme/theme.js

@@ -73,7 +73,9 @@ const DEFAULT_THEME_EXTRA_VARS = Object.freeze({
         '--up-skeleton-shimmer-color': '#e6e6e6',
         '--up-swipe-action-button-bg-color': '#c7c6cd',
         '--up-index-list-indicator-bg-color': '#c9c9c9',
-        '--up-calendar-month-mark-color': 'rgba(231, 232, 234, 0.83)'
+        '--up-calendar-month-mark-color': 'rgba(231, 232, 234, 0.83)',
+        '--up-navbar-glass-bg-color': 'rgba(255, 255, 255, 0.82)',
+        '--up-navbar-glass-blur': '20px'
     }),
     dark: Object.freeze({
         '--up-table2-header-bg-color': '#2a2d33',
@@ -84,7 +86,9 @@ const DEFAULT_THEME_EXTRA_VARS = Object.freeze({
         '--up-skeleton-shimmer-color': 'rgba(255, 255, 255, 0.12)',
         '--up-swipe-action-button-bg-color': '#4b5563',
         '--up-index-list-indicator-bg-color': '#4b5563',
-        '--up-calendar-month-mark-color': 'rgba(255, 255, 255, 0.04)'
+        '--up-calendar-month-mark-color': 'rgba(255, 255, 255, 0.04)',
+        '--up-navbar-glass-bg-color': 'rgba(28, 28, 30, 0.82)',
+        '--up-navbar-glass-blur': '20px'
     })
 })
 

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.8.108",
+  "version": "3.8.113",
   "description": "零云®uview-plus已兼容vue3支持多语言，120+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",

package/types/comps/actionSheet.d.ts

@@ -83,6 +83,10 @@ declare interface ActionSheetProps {
    * 点击取消按钮时触发
    */
   onClose?: () => any
+  /**
+   * 弹窗已关闭（离场动画结束、弹窗真正消失后）触发
+   */
+  onClosed?: () => any
   /**
    * 获取用户信息回调，openType="getUserInfo"时有效
    * @param detail 用户信息

package/types/comps/calendar.d.ts

@@ -209,6 +209,10 @@ declare interface CalendarProps {
    * 日历关闭时触发
    */
   onClose?: () => any
+  /**
+   * 日历已关闭（离场动画结束、弹窗真正消失后）触发
+   */
+  onClosed?: () => any
 }
 
 declare interface _Calendar {

package/types/comps/datetimePicker.d.ts

@@ -122,6 +122,10 @@ declare interface DatetimePickerProps {
    * 关闭选择器时触发
    */
   onClose?: () => any
+  /**
+   * 选择器已关闭（离场动画结束、弹窗真正消失后）触发
+   */
+  onClosed?: () => any
   /**
    * 点击确定按钮，返回当前选择的值
    */

package/types/comps/keyboard.d.ts

@@ -92,6 +92,10 @@ declare interface KeyboardProps {
    * 键盘关闭
    */
   onClose?: () => any
+  /**
+   * 键盘已关闭（离场动画结束、弹窗真正消失后）触发
+   */
+  onClosed?: () => any
   /**
    * 键盘顶部工具条右边的"完成"按钮被点击
    */

package/types/comps/navbar.d.ts

@@ -81,6 +81,19 @@ declare interface NavbarProps {
    * 标题的样式
    */
   titleStyle?: unknown
+  /**
+   * 导航栏模式。ios 模式下初始背景透明、标题左对齐大字号显示，
+   * 下滑压缩后过渡为居中标题并呈现磨砂背景。
+   * ios 模式下 fixed 与 placeholder 被忽略。nvue 端降级为 default。
+   * @default "default"
+   */
+  mode?: 'default' | 'ios'
+  /**
+   * 页面滚动距离，仅 ios 模式使用，需由页面 onPageScroll 传入。
+   * 不传时导航栏停留在大标题展开态。
+   * @default 0
+   */
+  scrollTop?: string | number
   /**
    * 点击左侧区域
    */

package/types/comps/picker.d.ts

@@ -77,6 +77,10 @@ declare interface PickerProps {
    * 关闭选择器时触发
    */
   onClose?: () => any
+  /**
+   * 选择器已关闭（离场动画结束、弹窗真正消失后）触发
+   */
+  onClosed?: () => any
   /**
    * 点击确定按钮，返回当前选择的值
    */

package/types/comps/popup.d.ts

@@ -78,13 +78,17 @@ declare interface PopupProps {
    */
   customStyle?: unknown
   /**
-   * 弹出层打开
+   * 弹出层打开（进场动画结束后）
    */
   onOpen?: () => any
   /**
-   * 弹出层收起
+   * 弹出层收起（关闭动作发生时，离场动画开始前；外部直接将show置为false时也会触发）
    */
   onClose?: () => any
+  /**
+   * 弹出层已关闭（离场动画结束、弹窗真正消失后）
+   */
+  onClosed?: () => any
 }
 
 declare interface PopupSlots {

package/types/func.d.ts

@@ -124,6 +124,17 @@ export interface Func {
     comp?: ComponentPublicInstance | ComponentInternalInstance | null
   ): Promise<UniNamespace.NodeInfo | UniNamespace.NodeInfo[]>;
 
+  /**
+   * 创建交叉观察器，优先使用组件实例上的同名方法，
+   * 避免小程序端因枚举 Vue 实例代理的键而产生告警
+   * @param comp 组件实例
+   * @param options 交叉观察器配置
+   */
+  upCreateIntersectionObserver(
+    comp?: ComponentPublicInstance | ComponentInternalInstance | null,
+    options?: UniNamespace.CreateIntersectionObserverOptions
+  ): UniNamespace.IntersectionObserver;
+
   /**
    * 进行延时，以达到可以简写代码的目的 比如: await uni.$u.sleep(20)将会阻塞20ms
    * @param value 延时时间（ms），默认 30

package/types/index.d.ts

@@ -142,6 +142,7 @@ declare module 'uview-plus' {
 	export const getPx: $u['getPx']
 	export const rpx2px: $u['rpx2px']
 	export const upGetRect: $u['upGetRect']
+	export const upCreateIntersectionObserver: $u['upCreateIntersectionObserver']
 	export const sleep: $u['sleep']
 	export const os: $u['os']
 	export const sys: $u['sys']