问题描述

之前这个 dialog 在测试页的时候是能正常弹出并且显示的。
某个页面点击某个div时弹出自定义的dialog，发现这个dialog 并没有显示，有点奇怪。

问题排查

一开始觉得有可能是dialog显示了被遮挡住了，所以看起来没有显示。然后修改z-index属性，发现还是一样的效果。 看来问题没有这么简单，还是仔细的分析一下... 最外层是个cube-slide,cube-slide-item 里面的div 触发点击弹出 自定义的dialog。dialog本身显示是没有问题的，可能是受到了其它组件的影响。然后我增加了一些打印，dialog的显示和隐藏的函数进行打印。

打印看到的时候，才发现原来是dialog被隐藏了.. 是不是代码哪里调用了hidedialog函数，发现并没有地方主动调用。

仔细想想感觉应该是导致了点击事件触发了两次。也只有可能是cube-slide会影响。带着问题继续去探索，cube-slide 是一个基于 better-scroll 进行封装的组件。 options 是 better-scroll 配置项，项目里的代码配置如下：

slideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0,
        eventPassthrough: 'vertical'
      }

click默认是没有影响的。

这个属性我注释掉了，发现 dialog 终于显示出来了。。 但是这个属性，我觉得也是有必要加的然后就增加了click:false dialog也是可以正常显示的。

总结

这个问题是同事让我帮忙看的，排查问题还是要一点点去慢慢确认问题。这种看似很奇怪的问题，更需要耐心。