1. Bug reproduction:
Introduce popup component, time selection component
json>
"usingComponents": {
"van-datetime-picker": "@vant/weapp/datetime-picker/index",
"van-popup": "@vant/weapp/popup/index"
}The page wants to achieve the effect of changing the scheduled time, that is, the mask layer nests the time selection component
wxml>
<view bindtap="showPopup">
预定时间:
<view class="date">{
{ filter.formatTime(currentDate) }}</view>
<van-popup show="{
{ show }}" bind:close="onClose" position="bottom">
<van-datetime-picker type="datetime" value="{
{currentDate}}" min-date="{
{ minDate }}" max-date="{
{ maxDate }}" bind:confirm="confirm" title="选择预约时间" bind:cancle="onClose"/>
</van-popup>
</view>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 });
},
});actual effect:
When the time is clicked, the pop-up box (mask and time) will appear normally
But when you click confirm/cancel, it will flash once and still keep this page, and the pop-up box will not disappear.
2. Debugging process:
1. Try to use
this.setData({ show: !this.data.show });The way to change the show, it is useful when you click cancel, but it is useless when you click OK
2. First test whether the value of show is changed according to the normal business
Add console printing before and after changing show
onClose() {
console.log('onClose')
console.log(this.data.show)
this.setData({ show: false });
console.log(this.data.show)
},Repeatedly click cancel, each time is the result: true false
That is to say, there is no problem with the js method. Every time you click to cancel, the value is true
3. In order to be more intuitive, check the show on the page and observe whether the new value is passed to the page
<view bindtap="showPopup">
预定时间:{
{show}}
<view class="date">{
{ filter.formatTime(currentDate) }}</view>
<van-popup show="{
{ show }}" bind:close="onClose" position="bottom">
{
{show}}
<van-datetime-picker type="datetime" value="{
{currentDate}}" min-date="{
{ minDate }}" max-date="{
{ maxDate }}" bind:confirm="confirm" title="选择预约时间" bind:cancle="onClose"/>
</van-popup>
</view>When the page is initialized, the first-level page show is false
After clicking the mask layer, the mask layer page show is true (with the page)
When the show of the console is found to be false, after the page flashes slightly, the show of the mask layer page is still true
When uniapp wrote code before, it encountered that showToast could not directly assign values to the parent component.
I have encountered a situation where the style was not set successfully before, but it can be controlled by adding a parent view.
Therefore, it is speculated that it has something to do with the parent-child component
3. Solutions
Read the code carefully, and change the [bindtap="showPopup"] of the pop-up mask layer to class="date"
<view>
预定时间:{
{show}}
<view class="date" bindtap="showPopup">{
{ filter.formatTime(currentDate) }}</view>
<van-popup show="{
{ show }}" bind:close="onClose" position="bottom">
{
{show}}
<van-datetime-picker type="datetime" value="{
{currentDate}}" min-date="{
{ minDate }}" max-date="{
{ maxDate }}" bind:confirm="confirm" title="选择预约时间" bind:cancle="onClose"/>
</van-popup>
</view>Make the popup method and the mask layer level
Sure enough, the mask layer is normal (click "OK" or the black mask, the bullet box disappears), but the cancel button is still invalid
The console is not printed out in "onClose", indicating that clicking cancel does not call the method "onClose"
That's the problem with the bind:cancle method
Here the callback parameter is "-", I don't know what it means, I don't have time to guess, so I just delete "Cancel" . Add a 【cancel-button-text=""】
<view>
预定时间:
<view class="date" bindtap="showPopup">{
{ filter.formatTime(currentDate) }}</view>
<van-popup show="{
{ show }}" bind:close="onClose" position="bottom">
<van-datetime-picker type="datetime" value="{
{currentDate}}" min-date="{
{ minDate }}" max-date="{
{ maxDate }}" bind:confirm="confirm" title="选择预约时间" cancel-button-text=""/>
</van-popup>
</view>This is the code that ended up working fine
If anyone knows how to gracefully make the "Cancel" button work, please let me know, thank you