ActionSheet的取消按钮会被TabBar组件遮挡

[wvfeng]

组件

ActionSheet

基础库版本

• [x] 3.5.1

设备机型

• 微信开发者工具
• iPhone 14 Pro

手机系统

• [x] iOS
• [ ] Android
• [ ] HarmonyOS

APP

微信小程序

组件库版本

2.36.4

预期行为

取消按钮在最上层，以便于用户点击

复现步骤

1. 使用npm初始化package.json
2. 安装antd-mini组件
3. 工具 --> 构建npm
4. 按照文档引入TabBar
5. 引入Button和ActionSheet组件，并按照文档使用组件
6. 通过按钮打开ActionSheet即可复现

语法错误问题与解决

2.36.4版本在微信小程序构建后会收到一个错误提示 只需要找到这个文件并修复语法错误即可 修改前 修改后

复现 demo

我上传的demo中已经按照复现步骤制作完毕，并且修复了上述语法错误问题

ActionSheetDemo.zip

[rayhomie]

wxs的问题，我会今天修复。 ActionSheet的取消按钮会被TabBar组件遮挡，可能需要自行调整一下组件样式层级关系

[wvfeng]

wxs的问题，我会今天修复。 ActionSheet的取消按钮会被TabBar组件遮挡，可能需要自行调整一下组件样式层级关系

通过调试我发现组件上的默认层级是998，把这个层级调整到10000或以上是可以显示取消按钮的，但是除非修改源码，否则我没把发覆盖这个配置，我尝试使用className给取消按钮所在的类ant-actionsheet-cancel，覆盖一个z-index属性，但是失败了，即便是把z-index设置到很大也不能让取消按钮显示到前面

[rayhomie]

2.36.5 我会给action-sheet组件新增zIndex属性，你去改这个属性吧

[wvfeng]

2.36.5 我会给action-sheet组件新增zIndex属性，你去改这个属性吧

好的 👍👍👍 这个版本预计什么时候发布？

[rayhomie]

最迟本周五

[rayhomie]

2.36.5 我会给action-sheet组件新增zIndex属性，你去改这个属性吧

好的 👍👍👍 这个版本预计什么时候发布？

2.36.5 已经发布

[wvfeng]

2.36.5 我会给action-sheet组件新增zIndex属性，你去改这个属性吧

好的 👍👍👍 这个版本预计什么时候发布？

2.36.5 已经发布

好的，感谢通知❤️，我去升级一下

[wvfeng]

2.36.5 我会给action-sheet组件新增zIndex属性，你去改这个属性吧

好的 👍👍👍 这个版本预计什么时候发布？

2.36.5 已经发布

是不是发布的时候遗漏了zIndex，我留意到你提交的PR里面是加了这个变量的，但是我这边正常升级后这个变量并不存在，这样会导致层级丢失，最终使用了popup 的默认层级998

[wvfeng]

2.36.5 我会给action-sheet组件新增zIndex属性，你去改这个属性吧

好的 👍👍👍 这个版本预计什么时候发布？

2.36.5 已经发布

是不是发布的时候遗漏了zIndex，我留意到你提交的PR里面是加了这个变量的，但是我这边正常升级后这个变量并不存在，这样会导致层级丢失，最终使用了popup 的默认层级998

经过测试手动添加这个变量定义可以解决这个问题，结果如下

[rayhomie]

你先通过 .ant-actionsheet-popup { z-index:10000 !important; } 这样处理你的场景吧

[wvfeng]

你先通过 .ant-actionsheet-popup { z-index:10000 !important; } 这样处理你的场景吧

好的，经过测试这个方案可以解决问题