微信小程序使用slot把weapp的遮罩层传入组件会出现点击闪烁

问题描述

开发微信小程序使用了有赞的 Vant Weapp的UI组件。
其中有个浮动遮罩是通过slot传入自定义标题栏组件的,会出现长按遮罩下方的一些元素会浮动上来显示,表现为快速点击会闪烁。
遮罩层用的是Weapp的Overlay。
如下图正常遮罩和长按时的遮罩,下方的元素浮动上来了。
正常遮罩
长按时的遮罩

问题出现的环境背景及自己尝试过哪些方法

测试过把遮罩放到页面代码里面一切正常,通过slot传入子组件后就出现这个问题

相关代码

粘贴代码文本(请勿用截图)

<!-- 自定义标题栏 -->
    <custom-title-bar left-slot="{{ true }}">
        <view slot="left" catch:tap="tapTitleBarLeft">
            <van-icon name="plus"/>
            <!-- van-overlay遮罩是通过 slot="left" 传入组件的 -->
            <van-overlay z-index="10" show="{{ floatMenu.show }}" catch:tap="onClickFloatMenuHide">
                <view class="float-menu-container" style="padding-top: {{ floatMenu.paddingTop }}rpx">
                    <view class="float-menu-block" bind:tap="onClickFloatMenu">
                        
                    </view>
                </view>
            </van-overlay>
        </view>

你期待的结果是什么?实际看到的错误信息又是什么?

目前能想到的只能是有相关遮罩传入子组件时都把子组件拿出来单独放到页面里重写。但这样很不友好。
期望大佬提供解决思路,或踩过类似坑的小伙伴分享下经验。

阅读 1.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题