uniapp 原生子窗体nvue的使用,及vue与nvue页面间的通讯

效果图:

 点击后显示

 再次点击后:

 注意:pages.json中配置在那个vue页面使用元素子窗体就配置在这里,子窗体最多不超过三个

{
            "path" : "pages/videoProblem/test2/test2",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
				"app-plus" : {
				    "subNVues" : [{
				            "id" : "test", // 唯一标识  
				            "path" : "subNvue/test", // 页面路径 
				            "type" : "popup", //type值为 popup或navigationBar时 position 和
				            "style" : {
				                "position" : "absolute",
								"dock":"left"
								
				            }
				        }
				    ]
				}
            } 
        }

 test2.vue 页面

<template>
	<view>
		<view class="page-body" >
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
					<cover-view @click="show()">点击会显示原生子窗体</cover-view>
					<cover-view>子窗体返回的值为:{{msg}} </cover-view>
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subNVue: '',
				msg: '',
				
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					// iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					// iconPath: '../../../static/location.png'
				}]
			}

		},
		onReady() {
			this.init() // 注意获取原生子窗体的位置 需放在onReady生命周期中调用

		},
		onLoad() {
			uni.$on('sendData',res=>{
				let {msg,isShow} = res
				this.msg = msg
				console.log(isShow)
				if(!isShow) {
					console.log(this.subNVue)
					// 关闭 nvue 子窗体  
					this.subNVue.hide('fade-out', 300)
				}
			})
		},
		methods: {
			init() {
				// 通过 id 获取 nvue 子窗体
				this.subNVue = uni.getSubNVueById('test')
				console.log(this.subNVue)
			},
			show() {
				// console.log(1111)
				// 打开 nvue 子窗体
				this.subNVue.show('slide-in-top', 300, () => {
					console.log('subNVue 原生子窗体显示成功');
				})
			}
		}
	}
</script>

<style>

</style>

 test.nvue页面

<template>
	<div class="test_box">
		<text> 我是test.nvue原生子窗体</text>
		<button type="succuess" @click="send">点击向test2.vue发送值</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods:{
			send() {
				uni.$emit('sendData',{msg:'我是子窗体的值test.nvue',isShow:false})
				
			}
		}
	}
</script>

<style scoped>
.test_box {
	/* display: flex; */
	height:400upx;
	width:400upx;
	background-color: pink;
}
</style>

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值