data->🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

1.web-view覆盖层问题

data->问题由来

web-view是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面。

所以这得多恶心。。。不仅铺满，还覆盖了普通的标签，调z-index都无解。

解决办法

web-view内部使用cover-view，调整cover-view的样式即可覆盖在web-view上。

cover-view

覆盖在原生组件上的文本视图。

app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。

支持的平台：

data->具体实现

<template>

<view>

<web-view :src="viewUrl" v-if="viewUrl" >

<cover-view @click="closeView()">

<cover-image src="../../static/design/close-icon.png"></cover-image>

</cover-view>

</web-view>

</view>

</template>

.close-view{

position: fixed;

z-index: 99999;

top: 30rpx;

left: 45vw;

.close-icon{

width: 100rpx;

height: 80rpx;

}

}

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

data->注意

仅仅真机上才生效，开发者工具上是看不到效果的，如果要调整覆盖层的样式，可以先把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 @click="closeView()">

<cover-image src="../../static/design/close-icon.png"></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失效问题

由于之前一直用ios测试的，今晚才发现这个问题

解决办法

cover-view, cover-image{

visibility: visible!important;

z-index: 99999;

}

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。