uni-app之实现层级覆盖(app端覆盖原生组件)的问题

作者 : 1024源码站 发布时间: 2020-08-1 共1.01K人阅读

具体问题:拓展组件uni-popup无法正常覆盖video组件

问题描述:在APP端,如果页面中使用了video组件,则拓展组件uni-popup(里面包括一个view组件,view下是个image组件)不能正常覆盖原生组件video。
示例:主要有一个video原生组件、一个image原生组件和一个uni-popup拓展组件

<template>
    <view>
        <view class="flex-sub margin-right-xs" style="height: 95%;">
            <video style="width: 100%;height: 100%;" id="myVideo" src="http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4" controls></video>
        </view>
        
        <view class="flex-sub margin-right-xs" style="align-self: center;" @tap="showBigImage">
            <image style="width: 150upx;height: 150upx;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="aspectFit"></image>
        </view>

        <uni-popup class="uni-bg-white" :show="type === 'middle'" position="middle" mode="fixed" @hidePopup="togglePopup('')">
            <view class="uni-bg-white" style="width:500upx;height:300upx;">
                <image style="width: 100%;height: 100%;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="aspectFit"></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
var _self;
export default {
    components: {
        uniPopup,
    },
    data() {
        return {
            type:"",
        }
    },
    methods: {
        showBigImage:function(){
            _self.type = "middle";
        },
        togglePopup(type) {
            _self.type = type;
        }
    },
    onLoad:function(){
        _self = this;
    }
}
</script>
<style>
.cover-img{
    position: fixed;
    z-index: 999;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10upx;
    padding: 30upx;
}
</style>

 

  • h5端可正常覆盖:

uni-app之实现层级覆盖(app端覆盖原生组件)的问题插图

  • app端不能正常覆盖:

uni-app之实现层级覆盖(app端覆盖原生组件)的问题插图(1)

 

分析:<video/> 组件在非H5端是客户端创建的原生组件,它的层级是最高的,高于普通前端组件,不能通过 z-index 控制层级。可使用 cover-view或cover-image覆盖在上面,也可通过plus.nativeObj.view或原生子窗体subNVue等方式来实现。

  • App端 cover-viewcover-image 中不支持嵌套其它组件。
  • App端暂不支持 cover-viewcover-image 组件之间的嵌套。
  • App端cover-view可覆盖的原生组件有限制,目前仅包括:videomap
  • App端还可以使用更强大的plus.nativeObj.view绘制原生内容
  • App端还提供了更灵活和强大的subNvue,比cover-view和plus.nativeObj.view都更强大
  • 其他小程序平台下,可以使用条件编译,完全按照其规范开发
  • 在 video 组件中使用时,不支持在全屏模式下使用cover-view
  • 支付宝小程序中 cover-view 不支持嵌套。

拓展:微信基础库 2.4.0 起已支持 video 组件的同层渲染,也就是video在非全屏时,可以被前端元素通过调节z-index来遮挡,但video全屏时,仍需要cover-view覆盖。
(1) 使用cover-image替代uni-popup:一方面程序报错,一方面也不符合操作需求,弃用

<cover-image class="cover-img" style="width:500upx;height:300upx;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="aspectFit"></cover-image>

uni-app之实现层级覆盖(app端覆盖原生组件)的问题插图(2)

cover-image在app端报错

(2) 使用plus.nativeObj.view:虽然更灵活,但易用性比较差、没有动画、不支持内部内容滚动
(3) 原生子窗体subNvue
说明:subNVues 是 vue 页面的原生子窗体。用于解决 vue 页面中的层级覆盖和原生界面灵活自定义用的。它不是全屏页面,也不是组件,就是一个原生子窗体。它是一个 nvue 页面,使用 weex 引擎渲染,提供了比 cover-view、plus.nativeObj.view 更强大的原生排版能力,方便自定义原生导航或覆盖原生地图、视频等。
注意:原生子窗体subNvue替代了原生增强提示框插件,避免原生插件麻烦的打包流程。

 

  • pages.json

,{
            "path" : "pages/ipms/miaoyou/home/home",
            "style" : {
                "app-plus": {  
                    "titleNView": false,  //不启用系统导航
                    "subNVues":[{  
                        "id": "popup", // 唯一标识  
                        "path": "pages/ipms/miaoyou/home/subNVue/popup", // 页面路径  
                        "type": "popup",  //原生子窗口内置样式,可取值:'popup',弹出层;"navigationBar",导航栏
                        "style": {  
                            "margin": "auto",
                            "width": "50%",
                            "height": "400upx"  
                        }  
                    }]  
                } 
            }
            
        }
<template>
    <view class="uni-flex uni-row" style="width: 100%;height: 100%;">
        <view style="width: 50%;height: 98%;">
            <video style="width: 100%;height: 100%;" id="myVideo" src="http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4" controls></video>
        </view>
        
        <view style="width: 50%;height: 98%;" @tap="showBigImage">
            <image style="width: 100%;height: 100%;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="aspectFit"></image>
        </view>
        
        <uni-popup class="uni-bg-white" :show="type === 'middle'" position="middle" mode="fixed" @hidePopup="togglePopup('')">
            <view class="uni-bg-white" style="width:500upx;height:300upx;">
                <image style="width: 100%;height: 100%;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" mode="aspectFit"></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
var _self;
export default {
    components: {
        uniPopup,
    },
    data() {
        return {
            type:"",
        }
    },
    methods: {

        showBigImage:function(){
            // #ifdef H5
            _self.type = "middle";
            // #endif
                
            // #ifdef APP-PLUS
            _self.showPopup();
            // #endif
            
        },
        showPopup() {
            uni.$emit('page-popup', {// 向 popup 传递消息
                imageUl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
                videoUrl:'http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4'
            });
            const subNVue = uni.getSubNVueById('popup');// 通过 id 获取 nvue 子窗体 
            subNVue.show('slide-in-top', 250);// 打开 nvue 子窗体
        },
        togglePopup(type) {
            _self.type = type;
        }
    },
    onLoad:function(){
        _self = this;
    }
}
</script>
<style>
.cover-img{
    position: fixed;
    z-index: 999;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10upx;
    padding: 30upx;
}
</style>


  • popup.nvue

<template>
    <div style="text-align: center;vertical-align: middle;">
        <image style="vertical-align: middle;" :src="imageUl" mode="aspectFit"></image>
        <!-- <video style="vertical-align: middle;" :src="videoUrl" controls></video> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            imageUl: '',
            videoUrl:''
        }
    },
    created() {
        const vm = this;
        uni.$on('page-popup', (data) => {
            vm.imageUl = data.imageUl;
            vm.videoUrl = data.videoUrl;
        })
    },
    beforeDestroy() {
        uni.$off('drawer-page')
    },
}
</script>

<style>

</style>

可能遇到的问题:
  • 获取到原生子窗体实例为null:查看id是否匹配正确
  • 实例方法未定义:编译模式查看是否为自定义编译模式
uni-app之实现层级覆盖(app端覆盖原生组件)的问题插图(3)
APP最终效果

作者:简书-瑟闻风倾

相关说明
① 本站VIP源码资源永久免费下载www.src1024.com
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,info@src1024.com。
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

1024资源网 » uni-app之实现层级覆盖(app端覆盖原生组件)的问题

发表评论