微信小程序-气泡框 Popover

写在前面

• 记录基于微信小程序-气泡框实现中产生的问题及思考

---

问题截图

问题描述

• 模拟器显示正常，但在真机上点击后，气泡框的箭头并没有消失，且点击同一级别区域，能利用覆盖消除箭头。【是不是一个很可爱的bug？

问题解决过程记录

• 定位问题发生的原因范围

  • 样式
    • 样式在判断显示条件(wx:if="{ {visible}}")生效后，仍然渲染
    • 否定原因
      • 查询代码发现，整个样式背景的设定是在::before伪元素选择器中
      • 且显示条件生效，在调试器中已没有该元素，但仍显示
  • 逻辑
    • 会不会是组件在渲染时，多渲染一份，我们使用判断条件进行开关时，只是对其中一个进行了操作
    • 怀疑依据
      • 
      • 上图可见：在popover组件下，有2个通过<slot>插入的相同内容

• 开始解决问题

  • 查询官方关于slot方面的介绍
    • 
  • 基于官方基础代码，复现问题
    • 产生一个child-tag组件，并在其中编写

      // components/child-tag.js.js
      Component({
               
        options: {
               
          multipleSlots: true // 在组件定义时的选项中启用多slot支持
        },
        /**
         * 组件的属性列表
         */
        properties: {
               
      
        },
        relations: {
               
          './component-tag-name': {
               
            type: