一、bug复现：

引入popup组件，时间选择组件

json>

"usingComponents": {"van-datetime-picker": "@vant/weapp/datetime-picker/index","van-popup": "@vant/weapp/popup/index"}

页面想实现，更改预定时间的效果，即遮罩层嵌套时间选择组件

wxml>

 预定时间:{{ filter.formatTime(currentDate) }}{ show }}" bind:close="onClose" position="bottom">{currentDate}}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:confirm="confirm" title="选择预约时间" bind:cancle="onClose"/>

js>

Page({data: {show: false,minHour: 10,maxHour: 20,minDate: new Date().getTime(),maxDate: new Date(2119, 10, 1).getTime(),currentDate: new Date().getTime()},showPopup() {this.setData({ show: true });},onClose() {this.setData({ show: false });},confirm() {...//省略业务代码this.setData({ show: false });},
});

实际效果：

单击时间时正常出现弹框（遮罩及时间）

但是点击确认/取消都是闪一下仍旧保持此页面，弹框不消失。

二、调试过程：

1、试了下使用

this.setData({ show: !this.data.show  });

的方式来改show，点击取消时有用，点击确定时没用

2、首先测试show是否根据业务正常改值了

在更改show前后加入console打印

    onClose() {console.log('onClose')console.log(this.data.show)this.setData({ show: false  });console.log(this.data.show)},

反复点击取消，每次都是结果 ：true false

也就是js方法没有问题，每次点击取消的时候，值都是true

3、为了更直观，在页面检测show，观察是否传新值到页面

 预定时间:{{show}}{{ filter.formatTime(currentDate) }}{ show }}" bind:close="onClose" position="bottom">{{show}}{currentDate}}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:confirm="confirm" title="选择预约时间" bind:cancle="onClose"/>

页面初始化时，一级页面show为false

点击出现遮罩层后，遮罩层页面show为true（与页面）

发现console的show为false时，页面微闪后，遮罩层页面的show仍是true

之前uniapp写代码时，遇到过showToast中不能向父组件直接赋值，

之前还遇到过样式本来设置不成功，但是加了父级view就可以控制的情况，

故推测跟父子组件有关系

三、解决方法

仔细看了代码，把弹出遮罩层的 【bindtap="showPopup"】换到了class="date"后

 预定时间:{{show}}{{ filter.formatTime(currentDate) }}{ show }}" bind:close="onClose" position="bottom">{{show}}{currentDate}}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:confirm="confirm" title="选择预约时间" bind:cancle="onClose"/>

使弹出方法和遮罩层平级

果然遮罩层正常了（点击“确定”或黑色遮罩处，弹框消失），但是取消按钮仍无效

在“onClose”中没有打印出console，说明点击取消并没有调用方法“onClose”

那就是bind:cancle这个方法的问题了

这里回调参数是个 "-"，也不知道是什么意思，没时间猜了，所以直接把“取消”删了。加一个【cancel-button-text=""】

 预定时间:{{ filter.formatTime(currentDate) }}{ show }}" bind:close="onClose" position="bottom">{currentDate}}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:confirm="confirm" title="选择预约时间" cancel-button-text=""/>

这就是最终正常运行的代码

有知道如何优雅的让“取消”按钮起到真正作用的，麻烦告诉我一下，谢谢