uni-app蒙板弹窗无法覆盖tabbar的问题

2,019 阅读1分钟

uni-app蒙板弹窗无法覆盖tabbar的问题

这个解决办法我是用的是nvue原生渲染,具体操作如下:

创建以.nvue为后缀文件,然后在pages.json里引用(在哪个页面下使用,就在那个模块里引用)

pages.json:

"path": "pages/index/index",
"style": {
        "navigationBarTitleText": "",
        "navigationBarTextStyle": "black",
        "enablePullDownRefresh":true,
        "backgroundColor":"#ffffff",
        "app-plus": {
                "animationAlphaBGColor": "#070C20",
                "scrollIndicator":"none",
                "subNVues":[{
                        "id":"popup",
                        "path":"./components/subNvue/open",
                        "type":"popup",
                        "style": {  
                                "position": "absolute",  
                                "dock": "right",  
                                "width": "300px",
                                "height": "500px", 
                                "left":"0px",
                                "top":"0px",
                                "background": "transparent"
                        }
                }]
        }
}

在页面中使用的时候要调用方法

openWindows(param) {
    let that = this
    let content = '';
    let winWidth
    let winHeight
    // 缩写法   
    //uni.getSubNVueById('popup').show();
    // 对子窗体添加一些自定义的配置
    // 通过 ID 获取 subNVues 原生子窗体的实例
    //获取的"popup"要和pages.json里面配置的id一致(非常重要,否侧会报错)
    const subNVue = uni.getSubNVueById('popup');
    // const subVue = uni.getSubNVueById("popup");
    //向子窗口传入参数
    uni.$emit('hello-popup', {
            type: param,
            content: content,
            winWidth: winWidth,
            winHeight: winHeight,
    })
    // 设置子窗口的样式
    subNVue.setStyle({
            width: winWidth,
            height: winHeight,
    })
    subNVue.show('slide-out-top', 3000);
},

.nvue的使用方法

created() {
    const _that = this;
    // 接收信息的页面
    uni.$on('hello-popup', (data) => {
            _that.content = data.content;
            _that.winWidth = data.winWidth;
             _that.winHeight = data.winHeight;
    });
    const checkAll = uni.getCurrentSubNVue()
    checkAll.addEventListener("hide",function(){
            
    },false)	
},

我在.nvue文件中使用封装的网络请求时会报错,没有找到解决办法的小伙伴可以使用uni的网络请求

uni.request({
    url:'http://......',
    data:{id:this.id},
    method:"POST",
    header:{'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    timeout:5000,
    success:async (res)=>{
      console.log(res)
    },fail(Error){
            console.log(Error)
       uni.showToast({title:"网络异常",duration:1000});
    }
});

具体详细的一些问题 请参考 uniapp.dcloud.io/tutorial/nv… uni-app官方文档