share-element组件 点击头部返回后弹出层失效

原生的案例展示

微信开发者文档预览中并没有头部返回按钮 点击查看示例

问题: 点击头部返回后,点击触发弹出层就失效

实际页面往往是需要顶部返回,如图:

失效的原因:

当点击返回按钮时,show的值仍然为true;再次点击某一个模块时,show的值并未修改.
实际上,弹出层仍然存在,只是视觉上消失了(个人理解,实际上为啥没懂..)
因此,解决方法就是再次执行 show = false 点击时 show 又为 true 

解决办法:

  showNext(e) {
    const idx = e.currentTarget.dataset.idx;
    this.setData({
      show: false,  //始终初始化为false
    })
    //通过异步的操作,重新修改show为true
   setTimeout(() => {
        this.setData({
          show: true,
          contact: contacts[idx],
          transformIdx: idx
        })
   },30)
   
  },