uniapp map层级太高,样式支持度不高 使用nvue解决

在pages.json里面配置,使用subNVues

{

            "path": "pages/appointmentRecovery/record/detail",

            "style": {

                "navigationBarTitleText": "预约详情",

                "app-plus": {

                    "subNVues": [{

                        "id": "recordInfo", // 唯一标识

                        "path": "/pages/appointmentRecovery/record/info", // 页面路径

                        // "type": "popup", //原生子窗口内置样式,可取值:'popup',弹出层;"navigationBar",导航栏

                        "style": {

                            "position": "absolute",

                            "bottom": "100upx",

                            "width": "100%",

                            "height": "50%",

                            "mask": "rgba(0,0,0,0)",

                            "style": {

                                "popGesture": "none" // 组织侧滑返回, none,close

                            }

                        }

                    },{

                        "id": "recordMap", // 唯一标识

                        "path": "/pages/appointmentRecovery/record/map", // 页面路径

                        // "type": "popup", //原生子窗口内置样式,可取值:'popup',弹出层;"navigationBar",导航栏

                        "style": {

                            "position": "absolute",

                            "top": "0upx",

                            "left": 0,

                            "width": "100%",

                            "height": "50%",

                            "mask": "rgba(0,0,0,0)",

                            "style": {

                                "popGesture": "none" // 组织侧滑返回, none,close

                            }

                        }

                    }]

                }

            }

        },

在父页面

// 根据id获取声明好的子页面

this.subNvueMap = uni.getSubNVueById('recordMap');

// 设置子页面的大小

this.subNvueMap.setStyle({ height: '50%' });

// 向子页面传参数

uni.$emit('to-modal1', JSON.stringify(obj));

// 通知子页面以什么形式显示

this.subNvueMap.show('slide-in-bottom', time, () => { console.log('显示subNvueMap'); });

子页面

// 子页面是以.nvue结尾的文件

// 在created声明周期中接收父页面的传参

uni.$on('to-modal1', data => { console.log('父组件传递给子组件的值', this.formData); });

// 子页面给父页面传参

uni.$emit('modal-change1', '我是传递给父组件的值');

// 在beforeDestroy生命周期销毁监听

uni.$off('to-modal1');

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容