[ActionSheet]遮罩残留导致遮挡

Oreslok commented 6 months ago

tdesign-miniprogram 版本

1.4.0

重现链接

No response

重现步骤

注意，仅真机测试能出现！

Page1 设置 ActionSheet 的 items 数量为4，在 close 事件中跳转（wx.navigateTo）至 Page2 Page2 后退（wx.navigateBack），Page1 将有高概率出现 ActionSheet Popup遮挡住页面简单看了下源码，我猜测由于 ActionSheet close 事件触发时，有可能还在执行 close动画，ActionSheet 内的 Popup 还未处理完成
此时，若是进行了页面的跳转，将导致遮罩残留

简单贴下 Page1 的代码

show action-sheet

showActionSheet() { this.setData({ actionSheetVisible: true }) },

onActionSheetCancel() { this.clsoeActionSheet() },

clsoeActionSheet() { this.setData({ actionSheetVisible: false }) },

onActionSheetClose(e: any) { this.clsoeActionSheet() const trigger = e.detail.trigger as string

if (trigger === 'select') {
  wx.navigateTo({
    url: '/pages/detail/detail'
  })
}

}

完整代码也提供下 actionsheet-test.zip

期望结果

就我当前的应用，我认为 clsoe 事件应该在 close 动画执行完毕，并且真的达到 close 状态时，才触发

实际结果

No response

基础库版本

3.4.4

补充说明

No response

github-actions[bot] commented 6 months ago

👋 @Oreslok，感谢给 TDesign 提出了 issue。请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

anlyyao commented 6 months ago

@Oreslok 感谢反馈，方便提供一下真机机型和录屏吗？我没能成功复现你的问题～

为了让遮罩更明显，我修改了背景色，其余保持不变，我这边测试结果如下：

https://github.com/Tencent/tdesign-miniprogram/assets/51158141/94f27613-529f-4b08-8751-fd434dada58c

Oreslok commented 6 months ago

https://github.com/Tencent/tdesign-miniprogram/assets/3244601/debf710f-3820-44dc-9871-606b03ec6c2f

@anlyyao 这个视频就比较明显了，在第二次返回的时候，出现了遮罩残留

Oreslok commented 6 months ago

@anlyyao 视频录制手机为小米14 Pro

anlyyao commented 6 months ago

@anlyyao 视频录制手机为小米14 Pro

是的，看到了，我这边找台安卓机复现下，感谢反馈～

w805756054 commented 4 months ago

我也遇到同样问题，从1.2.5升到1.4.5依然存在问题。当出现遮挡的时候，ActionSheet依然存在，可以点点击，只是看不见

https://github.com/user-attachments/assets/9ae31e11-126d-4ff8-8efe-f4e0ba8fc8fa

Tencent / tdesign-miniprogram