uniapp原生子窗体(弹出层为例子)
在当前目录下新建一个目录和一个nvue页面{"path": "msVideo/msVideo","style": {"navigationBarTitleText": "子窗体","navigationStyle": "custom","app-plus": {"animationType": "slide-out-right","animationDuration": 300,"subNVues
·
在当前目录下新建一个目录和一个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>
效果图
更多推荐
已为社区贡献2条内容
所有评论(0)