uni-app 弹窗
弹窗,在我们实际开发场景中是非常常用的,而uniapp的弹窗,虽然官方文档中也讲了到了一些实现方式,在官方文档中运用的是popup 子窗体,但是实际上使用的时候,有些问题也是莫名其妙的出现,而且这些问题居然还是很久以前就出现过了,但是并没有修复。所以下面讲个非常简单的实现方式。上面这种弹窗实现方式很简单,原理就是 在a页面上面 跳转b页面,而b页面半透明覆盖a页面,我们需要给b页面设置导航栏为隐藏
·
弹窗,在我们实际开发场景中是非常常用的,而uniapp的弹窗,虽然官方文档中也讲了到了一些实现方式,在官方文档中运用的是popup 子窗体,但是实际上使用的时候,有些问题也是莫名其妙的出现,而且这些问题居然还是很久以前就出现过了,但是并没有修复。所以下面讲个非常简单的实现方式。
上面这种弹窗实现方式很简单,原理就是 在a页面上面 跳转b页面,而b页面半透明覆盖a页面,
我们需要给b页面设置导航栏为隐藏
{
"path": "pages/B页/B页",
"style": {
//取消原生导航栏
"navigationStyle": "custom",
"backgroundColor": "transparent",
"app-plus": {
"animationType": "fade-in",
"background": "transparent",
"popGesture": "none"
}
}
}
正常创建a页面与b页面,只不过要给b页面设置导航栏隐藏
a页面
<template>
<view class="content">
<button @click="showPopup" type="primary">show popup</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
showPopup() {
uni.navigateTo({
url: 'pages/B页/B页'
})
}
}
}
</script>
<style>
</style>
b页面
<template>
<view @click="close" class="mask">
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
//关闭退出B页
close() {
uni.navigateBack()
}
}
}
</script>
<style>
page {
background: transparent;
}
.mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
}
</style>
这就是最简单的例子,原文地址在 uni-app 在APP端如何覆盖原生导航栏
更多推荐
已为社区贡献1条内容
所有评论(0)