web-view组件在App和小程序中层级较高,如需要在vue页面中写代码为web-view组件覆盖内容,小程序端无解,只能由web-view的组件自己弹出div

App端有如下若干方案:

1.比较简单的方式是actionsheet等原生弹出菜单(小程序也可以使用此方案)
2.使用plus.nativeObj.view。这里有一个底部图标菜单的示例,可参考https://ext.dcloud.net.cn/plugin?id=69
3.使用原生子窗体subNvue
4.可以在web-view组件内嵌的网页中弹出z-index更高的div。如果是外部网页,可以在vue中获得子webview对象后,通过evalJS为这个子webview注入一段js,操作其弹出div层。

下面只说 subNvue 方式

首先在 pages.json 文件中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
"pages": [
{
"path": "pages/detail/detail", // 在哪个页面弹窗
"style": {
"navigationBarTitleText": "",
"app-plus": {
"titleNView": false, //
"subNVues": [
{
"id": "popup", // 唯一标识
"type": "popup", // subNVue窗体类型,弹出(popup)和导航(navigationBar)。
"path": "pages/wv-modal/wv-modal", // subNVue 的路径
"style": { // 配置subNVue的位置,背景等样式属性。
"margin":"auto",
"width": "300px",
"height": "70%",
// subNVue无法设置圆角等样式,背景background设置为transparent,
// 然后可以给页面中view标签设置圆角等subNvuew无法实现的样式
"background": "transparent",
"mask": "rgba(0,0,0,0.5)",
"zindex": 9
}
}
]
}
}

},
]
}

在onLoad方法中获取subNvue的实例

pages/detail/detail

1
2
3
4
5
6
7
8
9
10
11
methods: {
showPopup() {
onst subNvue=uni.getSubNVueById('popup'); // 获取subNvue实例
subNvue.show(); // 显示
}
}
},
onLoad() {
onst subNvue=uni.getSubNVueById('popup'); // 获取subNvue实例
subNvue.hide(); // 隐藏,之后可通过点击某个按钮 显示
}

结果图

xuehuayu.cn