微信小程序开发之Wepy下的弹窗穿透

1. map组件上的dialog

自己mark一下，小程序框架使用的是wepy，首页使用了原生map组件，在map组件上需要设计一个弹窗，当点击map上的标记点marker时，从页面底部触发弹窗。

最开始参考官方文档，单单修改z-index并无法将自定义组件的层级覆盖在原生组件上，需要采用cover-view。

[图片上传失败...(image-cd4819-1609841152016)]

然而在实践中，微信开发工具中的调试信息会给出提示，cover-view只支持若干种元素，无法满足自由定制弹窗内容的要求。因此，一度考虑过当弹窗出现时，使用wx-if对map组件进行隐藏的操作。经实践后，发现效果也不如人意，因此转而想从已有的UI框架中寻找实现方法。

在Wux weapp中，有一个浮动按钮的组件，经测试，此组件可在map组件上层使用。在封装的浮动按钮中，并没有发现cover-view等标签，只是修改了z-index。

绕了一个大圈子，最终结论仍是直接修改组件的z-index值，即可覆盖在微信原生map组件上。这提示我，要敢于尝试，不要过于迷信文档。

当弹窗已完成后，在外层嵌套了scroll-view实现弹窗的可滚动显示。此时，随着弹窗的滚动，底部组件也会跟着滚动，导致导航栏消失。参考已有的解决方案，尝试修改了导航栏的position属性，在真机上测试，可能由于兼容性问题，并没有效果。

后来，看到有人说对组件设置catchtouchmove为true,

或为其绑定一个空事件,

prevent() {
    return;
}

在wepy框架下，与小程序官方开发工具转义后的代码对照，当直接按照上述代码进行设置时，转义后会自动在catch与touchmove中加入一个引号，因此最终绑定的方法为

在真机上测试可行，弹窗上的每次滚动都只会出现弹窗上的滚动条，而不会有整页的滚动条。
这种方法适用于当弹窗弹出时，只有弹窗上有touch操作，而非弹窗组件部分无操作的情况。
而在本场景中，如果要在底部出现弹窗后，非弹窗组件部分（地图）仍有滚动操作时使导航栏固定，只需要给导航栏再增加属性

当页面不存在滚动条时，position属性设置为fixed或absolute没有区别。
有滚动条时，一个可固定，一个跟随滚动。

wepy框架在运用过程中，有很多变量及函数绑定后的转义问题需要注意，这种问题我目前的办法就是对照开发工具里转义后的代码，根据经验进行试探。