uniapp开发app原生子窗体subNvue的使用

用uniapp开发app的时候经常会有以下问题:
1、覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏,比如 popup盖不住tabbar。
2、弹出层内部元素可滚动,
3、在map、video等组件上的添加复杂覆盖组件:比如直播视频上覆盖滚动的聊天记录

虽然有cover-view来覆盖原生组件,但是在app-vue中不支持嵌套,且只能在map、video组件使用
这个时候用原生子窗体是比较适合的

1、使用前配置page.json

在 pages.json 中,新增 subNVues 节点进行配置

全部配置表请看:原生子窗体配置表

id:作为唯一标志不能重复
path: ubNVue 子窗体的路径
type: 内置的特殊子窗体类型,弹出(popup)和导航(navigationBar)。可以不写
style: 配置子窗体的位置,背景等样式属性。
在这里插入图片描述
注意事项
在这里插入图片描述
开发区别请看:uniapp-----nvue教程

2、在页面中使用原生子窗体(这里的使用以在vue页面中为例)

在页面目录下新建专门存放原生子窗体的文件夹,subNVue是使用原生子窗体的vue页面
在这里插入图片描述
**

subNVue代码

**

因为事件监听是全局的,所以使用 uni. o n , 需 要 使 用 u n i . on ,需要使用 uni. on使uni.off 移除全局的事件监听,避免重复监听,一定要记得移除监听

<template>
	<view class="content">
		<view class="example">
			<view class="example-title">从上侧竖向滑出</view>
			<button type="primary" size="mini" @click="showPopup">显示 弹出层</button>
		</view>
		<view>
			<video style="width: 100vw" v-if="showVideo" id="video"
			:controls="false"
			:src="videoUrl"
			></video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showVideo: false,
				videoUrl: 'https://www.apple.com/105/media/cn/mac/family/2018/46c4b917_abfd_45a3_9b51_4e3054191797/films/bruce/mac-bruce-tpl-cn-2018_1280x720h.mp4'
			};
		},
		onLoad() {
			// 接收原生子窗体传来的数据的消息
			uni.$on('popup-page', (data) => {
				console.log(data);
				switch(data.type){
					case 'interactive':
						uni.showModal({
							title: '来自Popup的消息',
							content: data.info
						})
						break;
					default:
						uni.showToast({
							title: data.title,
						})
						break;
				}
			})
			// 监听 drawer 消息
			uni.$on('drawer-page', (data) => {
				uni.showToast({
					title: '点击了第' + data + '项',
					icon:"none"
				});
			})
		},
		//移除监听
		onUnload() {
			uni.$off('popup-page')
			uni.$off('drawer-page')
		},
		onReady() {
			this.showVideo = true
		},
		methods: {
		    showPopup() {
				// 向原生子窗体传递数据
				uni.$emit('page-popup', {
					title: '我是传递的内容'
				});
				const subNVue = uni.getSubNVueById('tSubNvue')
		        subNVue.show('slide-in-top', 250)
		    }
		}
	}
</script>

<style>
	.content {
		align-content: center;
	    height: 100%;
	}
	.example {
		padding: 0 10px 10px
	}
	.example-title {
		font-size: 14px;
		line-height: 14px;
		color: #777;
		margin: 40px 2rpx;
		position: relative
	}
	.example-title {
		margin: 40rpx 0
	}
	.title {
	    font-size: 20px;
		text-align: center;
	    color: #8f8f94;
	}
</style>

原生子窗体的nvue页面代码(testSubNvue.nvue)

书写nvue页面需要注意一些样式和布局方面的:注意事项

<template>
	<div class="wrapper">
		<text class="title">{{title}}</text>
		<scroller class="scroller">
			<div>
				<text class="content">{{content}}</text>
			</div>
			<div>
				<text style="color: red; font-size: 30rpx;">以下为 Popup 内部滚动示例:</text>
			</div>
			<div class="cell" v-for="(item, index) in lists" @click="handle(item)" :key="index">
				<text class="text">{{item}}</text>
			</div>
		</scroller>
		<div class="message-wrapper">
			<text class="send-message" @click="sendMessage">向页面发送消息</text>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				content: '',
				lists: [],
				
			}
		},
		created() {
			const that = this
			for (let i = 1; i < 20; i++) {
				this.lists.push('item' + i)
			}
			uni.$on('page-popup', (data) => {
				console.log(data)
				that.title = data.title
				that.content = data.content
			})
		},
		beforeDestroy() {
			uni.$off('drawer-page')
		},
		methods: {
			sendMessage() {
				//获取当前子窗体的唯一id
				const subNVue = uni.getCurrentSubNVue()
				uni.$emit('popup-page', {
					title: '已读完!',
				})
			}
		}
	}
</script>

<style>
	.wrapper {
		align-items: center;
		flex-direction: column;
		justify-content: center;
		padding: 10rpx 15rpx;
		background-color: #F4F5F6;
		border-radius: 4rpx;
	}

	.title {
		height: 100rpx;
		line-height: 100rpx;
		border-bottom-style: solid;
		border-bottom-width: 1rpx;
		border-bottom-color: #CBCBCB;
		flex: 0;
		font-size: 30rpx;
	}

	.scroller {
		height: 400rpx;
		padding: 8rpx 15rpx;
	}

	.content {
		color: #555555;
		font-size: 32rpx;
	}

	.message-wrapper {
		flex: 0;
		border-top-style: solid;
		border-top-width: 1rpx;
		border-top-color: #CBCBCB;
		height: 80rpx;
		align-items: flex-end;
	}

	.send-message {
		font-size: 30rpx;
		line-height: 80rpx;
		color: #00CE47;
		margin-left: 20rpx;
	}

	.cell {
		margin: 10rpx;
		padding: 20rpx 0;
		top: 10rpx;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		background-color: #5989B9;
	}

	.text {
		font-size: 30rpx;
		text-align: center;
		color: white;
	}
</style>

下面来看一下真机调试的效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

数据打印截图

在这里插入图片描述

  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
你好!如果你想使用uniapp开发app,我可以为你提供一些相关信息。Uniapp是一个基于Vue.js的开发框架,它可以将代码编译为多个平台(包括iOS、Android、H5等)。通过使用uniapp,你只需要编写一次代码,就可以在不同平台上运行。 为了开始使用uniapp开发app,你需要安装uni-app开发环境。首先,确保你已经安装了Node.js和Vue CLI(如果你之前没有安装过)。然后,你可以通过以下命令安装uni-app: ``` npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-project cd my-project npm run dev ``` 上述命令中,我们首先全局安装Vue CLI,然后使用uni-preset-vue创建一个新的uni-app项目,并进入项目目录。最后,通过运行npm run dev命令,你就可以在本地启动一个开发服务器,并在浏览器中预览你的app。 在开始开发之前,你需要熟悉Vue.js的基本知识。如果你已经熟悉Vue.js,那么使用uniapp开发app会更加容易上手。 在uniapp中,你可以使用Vue的语法编写页面和组件。此外,uniapp还提供了一些平台特定的API和组件,以实现更深入的原生功能。 一旦你完成了app开发,你可以使用uniapp提供的命令来构建app。具体的构建命令将根据你要构建的平台而有所不同。例如,如果你要构建iOS应用,你可以运行以下命令: ``` npm run build:ios ``` 这是一个简单的介绍,希望能帮助到你开始使用uniapp开发app。如果你有进一步的问题,请随时提问!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值