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

这篇具有很好参考价值的文章主要介绍了【uniapp】原生子窗体subNvue的使用与踩坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求

最近接到个需求, 需要在video组件上弹出弹窗, 也就是覆盖video这个原生组件
未播放时, 弹窗可以覆盖, 但是当video播放时, 写的弹窗就覆盖不了了
因为video是原生组件, 层级非常高, 普通标签是覆盖不了的, map标签同理
覆盖原生组件, 官方给出解决办法一. 使用cover-view标签 二. 使用subNvue原生子窗体, 或者Nvue
此处因为弹窗样式比较多元, cover-view不支持嵌套, 故选择使用subNvue来写这个弹窗

实现

1. pages.json配置

我这个页面配置了两个subnvue

		{
			"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%E4%BB%8B%E7%BB%8D

3. 窗体引用与通信
	const subNVue = uni.getSubNVueById('newMetalModal') //设置子窗体
		subNVue.show('slide-in-left', 200, () => {
		uni.$emit('sendMetalList', {  // 与子窗体通信
			metalList: this.metalList,
			});
		})

	uni.$on('sendMetalList', data => {
		his.metalList = data.metalList;
	});

踩坑记录

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

虽然原生窗体实现覆盖原生标签的作用, 但开发起来坑是一个接一个的,
不支持hbx调试, 必须真机, 而且有时不能实时编译
样式和标签使用上都有局限, 样式上特别是整个窗体的样式控制不是很灵活
页面对窗体显示隐藏的控制也没那么灵活, 类似dom元素的控制

subnvue和nvue还存在安卓和ios的兼容问题, 具体这里不细述了 , 主要时间太久忘了~~~~文章来源地址https://www.toymoban.com/news/detail-637912.html

到了这里,关于【uniapp】原生子窗体subNvue的使用与踩坑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • USB系列-LibUSB使用指南(1)-Windows下的报错与踩坑

    时隔一年再次开始撰写博客,这一年的时间经历了很多,现在终于稳定下来。以后很长一段时间都能够稳定的学习和更新。时间将会聚焦于USB和PCIe的开发进行,能和大家共同进步真的很高兴。 本篇为USB系列的LibUSB使用指南的第一篇。 USB系列主要围绕USB的知识、协议、开发总

    2024年02月22日
    浏览(36)
  • M1Mac 使用 qemu 配置 archlinux 虚拟机的完整c++开发环境与踩坑指南

    之前写了关于 qemu 安装 archlinux 的文章, 但是还有一些内容没得到解决, 比如很多时候 ssh 连接不成功, 这时候用图形界面(默认选项)的优势就体现出来了, 并且如果需要传输文件或者需要使用对外的端口, 仅转发一个22端口是不够的, 最后就是 gdb 调试的整套环境的配置, 这些问题

    2024年02月06日
    浏览(54)
  • 关于uni-app与vue路由配置的不同,不使用uni.navigateTo接口跳转时,使用this.$router.push的踩坑经验

           目录 懵逼的一个小时    uni-app与vue路由配置的不同 非官方接口的另类写法 错误编写: 正确编写(只需写父组件即可,其他是多余):         之前用vue写router路由的时候,先配置一个路由表,然后再将配好的路由push到已有的组件里面,再通过RouterView/RouterV

    2024年02月09日
    浏览(51)
  • uni-app 上架应用商店踩坑过程

    Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage 解决办法 :在appstoreconnect中按实际情况填写隐私相关信息 Guideline 5.1.2 - Legal - Privacy - Data Use and Sharing 解决办法 :去掉IDFA,并且IDFA相关的描述也要去掉 使用相机、相册等权限,询问时需描述使用目的 经检测发现,您的应用存

    2023年04月09日
    浏览(75)
  • 【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能

    组件使用的是uview组件,Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。 通过mode参数定义键盘的类型,v-model绑定一个值为布尔值的变量,我绑定的是showKeyboard变量,控制键盘的弹出与收起; mode = number (默认值)为数字键盘,此时顶部工具条中间的提示文字为\\\"数字键盘

    2023年04月16日
    浏览(66)
  • 字节小程序踩坑-uni-app字节跳动小程序运行

    运行-运行到小程序模拟器-运行设置 运行-运行到小程序模拟器-字节跳动开发者工具  注意:抖音小程序不会像微信小程序自动打开!!!! 复制提示的地址 手动打开抖音小程序 点击导入项目,把地址复制到项目目录,点击导入即可 现在修改改HBuilderX的内容并运行,抖音小

    2024年02月14日
    浏览(43)
  • miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)

    小程序分类:uni-app qq小程序 支付宝小程序 百度小程序 钉钉小程序 微信小程序 小程序转成uni_app 小程序转为uni_app 小程序转uni_app 小程序转换 工具现在支持npm全局库、HBuilderX插件两种方式使用,任君选择,HBuilderX插件地址:https://ext.dcloud.net.cn/plugin?id=2656 【miniprogram-to-uniapp】

    2024年02月08日
    浏览(55)
  • uni-app(踩坑第三篇):音频Api之uni.createInnerAudioContext()

    uni.createInnerAudioContext() 创建并返回内部 audio 上下文  innerAudioContext  对象。 最近在写一个仿网易云的项目,使用uni.createInnerAudioContext()封装了一个音频组件 #myaudio.vue 主要实现了图片旋转以及音乐的播放和暂停 有没有大佬指教一番的让我涨涨知识 这是实现图片绕中心轴无限旋

    2024年02月15日
    浏览(69)
  • 前端html2canvas生成截图【实现步骤与踩坑】

    需求 :点击下载可以导出组件的 截图 及数据信息文件 分析 :前端生成组件截图,带着其他参数传给后端,拿到excel文件并下载。关键在于生成组件的截图,这里通过 html2canvas 插件来实现。 1.下载插件 npm install html2canvas 2.引入 3.通过ref拿到要下载组件的dom元素 4.通过html2ca

    2024年04月11日
    浏览(48)
  • 『UniApp』uni-app-打包成App

    大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为微信小程序并且发布到微信小程序商店 趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包成APP。 打包 App 也是一样的,首先需要配置关于 App 应用的基础信息,打开 manifest

    2024年02月04日
    浏览(99)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包