代码说明：这里的案例是一个关闭按钮图标悬浮在webview上，点击图标可以关闭当前预览的webview。

注意

仅仅真机上才生效，开发者工具上是看不到效果的，如果要调整覆盖层的样式，可以先把web-view标签注释了，写完样式没问题再释放web-view标签。

2.web-view导航栏返回

问题由来

• 小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。

场景

用户在嵌套的webview里填写表单，不小心按到导航栏的返回了，就全没了。

解决办法

使用page-container容器，点击到返回的时候，给个提示。

page-container

页面容器。

小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

具体实现

<template>     <view> 		<web-view :src="viewUrl" v-if="viewUrl" > 			<cover-view class="close-view" @click="closeView()"> 				<cover-image class="close-icon" src="../../static/design/close-icon.png" alt="解决小程序web-view两个恶心问题"></cover-image> 			</cover-view> 		</web-view>           <!--这里这里，就这一句-->           <page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container>     </view> </template>  export default {     data() {         return {             isShow: true         }     },     methods: {         beforeleave(){             this.isShow = false             uni.showToast({                     title: '别点这里',                     icon: 'none',                     duration: 3000             })         }     } }

cover-view, cover-image{     visibility: visible!important;     z-index: 99999; }