BUG解决：微信小程序调用vantweapp遮罩层popup 更改show后没反应，弹框/遮罩层不隐藏，show失效

一、bug复现：

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

json>

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

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

wxml>

    预定时间:   {{ filter.fORMatTime(currentDate) }}         

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}}      

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

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

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

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

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

故推测跟父子组件有关系

三、解决方法

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

    预定时间:{{show}}   {{ filter.formatTime(currentDate) }}       {{show}}      

使弹出方法和遮罩层平级

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

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

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

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

    预定时间:   {{ filter.formatTime(currentDate) }}         

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

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

来源地址：https://blog.csdn.net/weixin_45752941/article/details/128970946