【uniapp】原生子窗体subNvue的使用与踩坑

需求

最近接到个需求, 需要在video组件上弹出弹窗, 也就是覆盖video这个原生组件

未播放时, 弹窗可以覆盖, 但是当video播放时, 写的弹窗就覆盖不了了

因为video是原生组件, 层级非常高, 普通标签是覆盖不了的, map标签同理
覆盖原生组件, 官方给出解决办法一. 使用cover-view标签 二. 使用subNvue原生子窗体, 或者Nvue

此处因为弹窗样式比较多元, cover-view不支持嵌套, 故选择使用subNvue来写这个弹窗

实现

1. pages.json配置

我这个页面配置了两个subnvue

javascript 复制代码
		{
			"path": "pages/player/player1",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"app-plus": {
					// 将回弹属性关掉
					"bounce": "none",
					"popGesture": "none",
					"subNVues": [{
						"id": "newMetalModal", // 唯一标识  
						"path": "pages/player/subNVue/newMetalModal", // 页面路径  
						// "type": "popup",  // 这里不需要
						"style": {
							"position": "absolute",
							"dock": "top",
							"background": "transparent",
							"margin": "auto"
						}
					}, {
						"id": "cardSuccessModal", // 唯一标识  
						"path": "pages/player/subNVue/cardSuccessModal", // 页面路径  
						// "type": "popup",  // 这里不需要
						"style": {
							"position": "absolute",
							"dock": "top",
							"background": "transparent",
							"margin": "auto"
						}
					}]
				}
			}
		}, 

2. 创建nvue文件

官方给出nvue开发的注意事项, 和vue写法的区别, 在此不赘述

传送门 https://uniapp.dcloud.net.cn/tutorial/nvue-outline.html#nvue介绍

3. 窗体引用与通信

javascript 复制代码
	const subNVue = uni.getSubNVueById('newMetalModal') //设置子窗体
		subNVue.show('slide-in-left', 200, () => {
		uni.$emit('sendMetalList', {  // 与子窗体通信
			metalList: this.metalList,
			});
		})
javascript 复制代码
	uni.$on('sendMetalList', data => {
		his.metalList = data.metalList;
	});

踩坑记录

  1. 窗体最外部div不能使用v-for循环, 否则会整个窗体不显示, 需要做循环的话, 可以在里层做循环
  2. css 背景不支持渐变linear-gradient, 不会生效
  3. 界面与窗体通信时, uni.$emit() 需要写在subNVue.show() 回调内, 否则通信失败
  4. 只有text标签可以设置字体大小,字体颜色。因此文字需要text标签内
  5. 开发过程中发现修改文件后在真机编译时, 有时并不能实时编译, 比如在pages.json配置第二个窗体, 真机没有生效, 需要重新运行才行
  6. 若界面打开就时不需要显示窗体, onLoad钩子里需要首先subNvue.hide(), 通过事件再调用show(), 否则界面打开时就会显示窗体
  7. 写css时, 只能 .classname{} 编写, 使用scss嵌套或者继承等等写法 .a .b{} .a>.b{} 样式都会无效

虽然原生窗体实现覆盖原生标签的作用, 但开发起来坑是一个接一个的,

不支持hbx调试, 必须真机, 而且有时不能实时编译

样式和标签使用上都有局限, 样式上特别是整个窗体的样式控制不是很灵活

页面对窗体显示隐藏的控制也没那么灵活, 类似dom元素的控制

subnvue和nvue还存在安卓和ios的兼容问题, 具体这里不细述了 , 主要时间太久忘了~~~~

相关推荐
柳中仙1 分钟前
uniapp+vue3小程序分享
小程序·uni-app
curdcv_po2 分钟前
甲方嫌弃,项目首页加载太慢
前端
刘同学有点忙4 分钟前
技术升级中的"幽灵Bug"排查:从message失效看架构迁移的隐性成本
前端
怪大叔95275 分钟前
vue组件之远程组件
前端·javascript·vue.js
邢同学爱折腾7 分钟前
长安的荔枝小说阅读器——程序员的浪漫与效率
前端·javascript
墨夏9 分钟前
Tauri + NextJS 扫码登录
android·前端·ios
天生我材必有用_吴用10 分钟前
Three.js开发必备:灯光详解附带案例
前端
Hilaku28 分钟前
用好了 watchEffect 才算会用 Vue3 —— 那些让人误解的响应式陷阱
前端·javascript·vue.js
GISer_Jing32 分钟前
Zustand 状态管理库:极简而强大的解决方案
前端·javascript·react.js
zacksleo33 分钟前
鸿蒙Flutter实战:25-混合开发详解-5-跳转Flutter页面
前端·flutter·harmonyos