1***@qq.com
1***@qq.com
  • 发布:2021-07-30 18:31
  • 更新:2021-07-30 18:31
  • 阅读:637

subNVue的一些实验

分类:uni-app

最近在熟悉uni-app的api,准备在demo里使用遮罩层,找官方文档,一顿搜索点到了subNVue,于是跟着开发指南和文档用subNVue写一个遮罩试试(毕竟官方说这个很强大,可以盖住原生组件,还能实现内部滚动)。
根据我的测试结果,如果仅仅根据uni-app的文档,我不能写出一个令自己满意的遮罩层,比如说,你不能阻止手机上的虚拟返回键关闭遮罩,你不能自己控制是否通过点击遮罩关闭遮罩层。
根据文档中的一些线索:

  1. ‘Android平台4.0以上系统才支持“transparent”背景透明样式’。
  2. 除 popup 外,其他值域参考 5+ webview position 文档。
    去查看H5+的webview文档(subNVue是对H5+webview的一层封装,但是封装的功能不全,要真正发挥subNVue的强大功能还是要结合plus对象)。
    下面是我的测试代码():
    在page.json里添加如下配置:

    {  
    "path": "pages/tabBar/home/home",  
    "style": {  
        "enablePullDownRefresh": false,  
        "navigationStyle": "default",   
        "navigationBarTitleText": "Home",  
        "app-plus": {  
            "titleNView": { // 标题栏样式  
                // "homeButton": true,  
                "buttons": [  
                    {  
                        "type": "back",  
                        "float": "left"  
                    },  
                ]  
            },  
            "subNVues":[{   
                   "id": "test", // 唯一标识    
                   "path": "/paltform/app-plus/subNVue/overlay", // 页面路径    
                   "type": "popup",  
                   "style": {  // 应该对应的是H5+中的webviewStyle  
                   "position": "absolute",    
                       "dock": "right",    
                       "width": "100upx",    
                       "height": "150upx",    
                        // "background": "rgba(0,0,0,0.5)",  
                   "mask": "none",//mask的值很重要,设置成none点击遮罩不会再关闭遮罩了  
                   "backButtonAutoControl": "none"   // 如果值是quit点击虚拟返回键会直接退出app  
                   }    
            }]    
        }  
    
    }  
    }

    overlay.vue:


<template>  
    <view class="tt">  
        <image class="swiper-item home-banner-item" mode="widthFix" src="https://pic2.zhimg.com/v2-25f301124c7524029d043a038655c829_1440w.jpg?source=172ae18b"></image>  
        </view>  

</template>  

<script>  

    export default {  
        data() {  
            return {  

            }  
        },  
        onLoad: function () {  
            const subNVue = uni.getCurrentSubNVue(); // subNVue对应的webview 对象  
            console.log(plus.webview.currentWebview().id); // package.json里设置的subNVue的id  
            console.log(subNVue.id); // package.json里设置的subNVue的id  
            console.log(plus.webview.currentWebview().opener());//创建subNVue对应的webview 的父webview,与 home.vue的webview是同一个webview  
            subNVue.canBack(function(e){  
                     console.log('是否可返回:'+e.canBack);  
                    });  
            // subNVue.addEventListener('hide', function(){  
            //     // subNVue.setStyle({mask:'rgba(0,0,0,1)'});  
            //  console.log(123000);  
            // },false);  
            // console.log(subNVue.parent());  
            subNVue.setStyle({  
                background: '#ff4050',  
            })  
            plus.key.addEventListener('backbutton',function() {  
                console.log('backbutton'); // 这个可以拦截手机上的虚拟返回键  
                return true;  
            })  
        },  
        onUnload:function(){  

        },  
        onBackPress() {  
            return true; // 这个貌似不起作用  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>  

只是初步测试,希望uni-app官方能把文档给写清楚,不要让开发者猜,提高大家的工作效率。

3 关注 分享
3***@qq.com Kytrun 7***@qq.com

要回复文章请先登录注册