uni-app 【报Bug】uni ui的fab按钮无法悬浮在nvue的plus.webview上面

uni-app 【报Bug】uni ui的fab按钮无法悬浮在nvue的plus.webview上面

开发环境 版本号 项目创建方式
Windows Win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Win10

HBuilderX类型：正式

HBuilderX版本号：3.0.7

手机系统：Android

手机系统版本号：Android 7.0

手机厂商：模拟器

手机机型：Mumu模拟器

页面类型：nvue

打包方式：离线

项目创建方式：HBuilderX

### 示例代码：

```javascript
<template>  
    <view>  
        <uni-fab></uni-fab>  
    </view>  
</template>  
<script>  
    import uniFab from '@/components/uni-fab/uni-fab.vue'  
    export default {  
        components: {  
            uniFab  
        },  
        onLoad() {  
            const systemInfo = uni.getSystemInfoSync()  
            // plus.webview.open('https://dcloud.io/', {width: systemInfo.safeArea.width, height: systemInfo.safeArea.height})  
        }  
    }  
</script>

操作步骤：

原帖：https://ask.dcloud.net.cn/question/116081

bug：@DCloud_heavensoft

代码如下：

<template>  
    <view>  
        <uni-fab></uni-fab>  
    </view>  
</template>  
<script>  
    import uniFab from '@/components/uni-fab/uni-fab.vue'  
    export default {  
        components: {  
            uniFab  
        },  
        onLoad() {  
            const systemInfo = uni.getSystemInfoSync()  
            // plus.webview.open('https://dcloud.io/', {width: systemInfo.safeArea.width, height: systemInfo.safeArea.height})  
        }  
    }  
</script>

注销掉plus.webview.open时可以看到fab按钮

如果显示webview，则fab按钮被覆盖


### 预期结果：

fab覆盖在webview上


### 实际结果：

webview覆盖在fab上


更多关于uni-app 【报Bug】uni ui的fab按钮无法悬浮在nvue的plus.webview上面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

不是bug。fab是前端组件，可以覆盖在同为组件的web-view上。 但用plus.webview方式创建的webview是另一个view，前端的fab肯定盖不住。

更多关于uni-app 【报Bug】uni ui的fab按钮无法悬浮在nvue的plus.webview上面的实战教程也可以访问 https://www.itying.com/category-93-b0.html


那要如何才能覆盖？

如何做个按钮去覆盖plus.webview并且有点击事件？

subNVUE能覆盖得了吗？

回复 MonikaChen: 可以

回复 DCloud_heavensoft: 多谢指点，我试试

回复 DCloud_heavensoft: 试了一下subNVue，还是会被plus.webview覆盖掉

回复 DCloud_heavensoft: 尝试用zindex解决，发现也是个bug，几年前有人提出过：https://ask.dcloud.net.cn/question/22817

回复 DCloud_heavensoft: 因为要拦截webview资源的加载，查了一下资料，貌似只有plus.webview能做到，<web-view>标签没给这个权限。同时需要右下角悬浮一个按钮作为功能键。如果实在不行，那交互就的更改成不用悬浮的，操作便捷度会差一些。我一度绝望到打算学安卓原生开发，哎

回复 MonikaChen: 熟悉了原生开发的确可以让你有更多的方法解决 uni-app 中的需求，不过即使你不熟悉原生开发也可以通过熟悉 5+API 来解决很多需求。比如使用 plus.nativeObj.View 来覆盖：先创建 webview，再创建 nativeView，然后 append 到 webview 上。

回复 DCloud_UNI_GSQ: plus.nativeObj.View是可以，无法用uniapp的组件，做界面会麻烦很多

这是一个已知的层级问题，在nvue页面中，plus.webview创建的webview会覆盖所有原生组件。这是由于Android系统的WebView实现机制决定的，原生WebView会始终显示在最上层。

解决方案：

  1. 使用5+ Webview的zindex属性（仅部分Android版本有效）：
plus.webview.open(url, {
    width: '100%',
    height: '100%',
    zindex: 1  // 尝试设置较低的zindex
});
  1. 改用uni-app的web-view组件替代plus.webview：
<template>
    <view>
        <web-view src="https://dcloud.io/"></web-view>
        <uni-fab></uni-fab>
    </view>
</template>
回到顶部