uniapp原生子窗体(弹出层为例子)

在当前目录下新建一个目录和一个nvue页面

pages.json文件

{"path": "msVideo/msVideo","style": {"navigationBarTitleText": "子窗体操作","navigationStyle": "custom","app-plus": {"animationType": "slide-out-right","animationDuration": 300,"subNVues":[{"id":"videos","path":"msVideo/subNvue/videos","type":"popup","style":{"margin":"auto","width":"100%","height":"100%","background":"transparent" //背景透明}}]}}},

然后在子窗体页面中写入 videos.nve

<template><view class="videos" @click="onEvents"><view class="videos_e"><view class="videos_title"><view class="videos_titles"><text class="videos_titles_one">提示</text></view><view class="videos_titless"><text class="videos_titless_one">是否保存为草稿?</text></view></view><view class="videos_operation"><view class="videos_operations"><text class="videos_operations_one" @click="onCancel">取消</text></view><view class="videos_operationss"><text class="videos_operationss_one" @click="onDetermine">确认</text></view></view></view></view>
</template><script>export default {data() {return {}},onLoad() {},onShow() {},methods: {// 默认给父级加一个定时器就不会出现点击关闭子窗体的问题了onEvents() {},// 取消onCancel() {//向原生子窗体传递数据uni.$emit('page-popup', {msg: "取消"});},// 确定onDetermine() {//向原生子窗体传递数据uni.$emit('page-popup', {msg: "确定"});}}}
</script><style>.videos {background-color: rgba(0, 0, 0, 0);margin: calc(50% - 280rpx) calc(50% - 280rpx);align-items: center;justify-content: center;}.videos_e {background-color: #FFFFFF;height: 299rpx;width: 560rpx;border-radius: 30rpx;}.videos_title {width: 560rpx;height: 200rpx;align-items: center;justify-content: center;border-bottom-width: 1rpx;border-color: #E5E5E5;border-style: solid;}.videos_titles_one {font-size: 38rpx;font-weight: 700;}.videos_titless {margin-top: 15rpx;}.videos_titless_one {font-size: 32rpx;}.videos_operation {width: 560rpx;height: 99rpx;flex-direction: row;}.videos_operationss {border-left-width: 1rpx;border-color: #E5E5E5;border-style: solid;}.videos_operations,.videos_operationss {width: 280rpx;height: 99rpx;align-items: center;justify-content: center;}.videos_operations_one {font-size: 36rpx;color: #343434;}.videos_operationss_one {font-size: 36rpx;color: #FF0423;}
</style>

然后在父页面通过事件通讯获取子窗体中的方法 msVideo.nvue

<template><view class="container"><view @click=“onExten”>点击调用子窗体</view></view>
</template><script>export default {data() {return {msg: "",}},onLoad() {const self = this;uni.$on('page-popup', (data) => {self.msg = data.msg;self.subNames()console.log(data)})},onShow() {},onUnload() {//移除监听uni.$off('page-popup')},methods: {// 调用子窗体onExten() {// 通过 id 获取 nvue 子窗体  const subNVue = uni.getSubNVueById('videos')// 打开 nvue 子窗体  subNVue.show('none', 300);},// 弹出层做的操作subNames() {if (this.msg == "确认") {}if (this.msg == "取消") {const subNVue  uni.getSubNVueById('videos')// 关闭弹窗subNVue.hide('none', 300)}}}}
</script>

效果图

uniapp原生子窗体(弹出层为例子)相关推荐

layui弹出层的表单验证
这里写自定义目录标题 layui弹出层form表单自带的验证不执行废话少说放代码接下来如何让弹出层执行form验证规则但是这个提交并不完整依旧有问题,只是部分验证有用,表单验证没有验证数据直接提 ...
uni-app中覆盖视频（原生子窗体）、视频下载
在uni-app中,使用video时,要在视频上覆盖内容,并且要兼容app端,安卓端的适配还好做点,但是ios的话,就弄了我好久,搞了大半天才搞定,这里记录下 1.微信小程序端视频做的是全屏显示的视 ...
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别！
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...
uni-app中同一个页面如何设置多个弹出层（弹框）
uni-app前端项目开发中,在使用uni-popup弹出层组件时,通常同一个页面要用到多个弹出层.提示窗口.提示框等等.那么怎么样注册多个弹出层而不冲突呢? 下面我以注册两个弹出层为例来说一下,注册 ...
UNI-APP在使用SubNvue原生子窗体时，清理缓存的问题
最近在项目中遇到了一个莫名其妙的问题,在UNI-APP首页利用SubNvue原生子窗体实现了一个drawer抽屉菜单,当切换账户并uni.reLaunch之后,重新进入首页,多次打开.关闭drawer ...
uniapp中使用弹出层
uniapp中使用弹出层因为业务的需要,需要弹出一个复选框, 使用uniapp中自带的框架使用: 第一步:下载下示例项目,找到主要的文件夹第二步:将该文件夹放到组件的地方第三步:使用 1· 2 ...
uniapp - 弹出层的使用
目录前言报错原因分析使用步骤第二步前言最近在写小程序的项目,前面的页面跳转.样式结构,写的都很流畅,奈何后面直接在小程序的popup弹出层卡死,就这一个功能,卡了老半天报错原因分析最 ...
uniapp 使用原生子窗体进行视频聊天
uniapp 使用原生子窗体进行视频聊天现在 uniapp 开发的实时音视频聊天类的 APP 大部分都要在 nvue 页面上进行开发.虽然 nvue 与 vue 的区别不是很大,但还是有所差异的. ...
js layui 弹出子窗体_Layui中JS实现弹出层的应用
点我 //弹出一个页面层 var oBtn = document.getElementById('tab_1'); oBtn.onclick = function (){ layer.open({ t ...

uniapp原生子窗体(弹出层为例子)

uniapp原生子窗体(弹出层为例子)相关推荐

最新文章

热门文章