uni-app 之 uni.showActionSheet

uni.showActionSheet是 uni-app 中用于显示操作菜单的 API，通常用于提供多个选项供用户选择操作。

基本用法

uni.showActionSheet({itemList:["选项一","选项二","选项三"],success:function(res){console.log("用户点击了第"+(res.tapIndex+1)+"个选项");},});

参数说明

参数	类型	默认值	必填	说明
itemList	Array	-	是	按钮的文字数组，数组长度最大为 6
itemColor	String	‘#000000’	否	按钮的文字颜色
success	Function	-	否	接口调用成功的回调函数
fail	Function	-	否	接口调用失败的回调函数
complete	Function	-	否	接口调用结束的回调函数

success 返回参数说明

success回调函数会收到一个对象参数，包含以下属性：

参数名	类型	说明
tapIndex	Number	用户点击的按钮序号，从上到下的顺序，从 0 开始

示例代码

基础用法

uni.showActionSheet({itemList:["拍照","从相册选择","取消"],success:function(res){console.log("用户点击了第"+res.tapIndex+"个选项");switch(res.tapIndex){case0:// 拍照逻辑takePhoto();break;case1:// 从相册选择逻辑chooseFromAlbum();break;case2:default:// 取消操作break;}},fail:function(res){console.log("用户取消操作");},});

自定义文字颜色

uni.showActionSheet({itemList:["编辑","分享","删除","取消"],itemColor:"#007AFF",success:function(res){switch(res.tapIndex){case0:editItem();break;case1:shareItem();break;case2:deleteItem();break;}},});

处理取消操作

uni.showActionSheet({itemList:["保存图片","收藏","举报"],success:function(res){switch(res.tapIndex){case0:saveImage();break;case1:favorite();break;case2:report();break;}},fail:function(res){console.log("用户取消选择");},});

注意事项

1. itemList数组长度最多为 6 个，超出部分会被忽略
2. 在微信小程序中，Android 平台的 action sheet 会从底部弹出，iOS 平台会从右侧滑出
3. itemColor仅支持十六进制颜色值
4. 用户点击遮罩层或按下返回键也会触发fail回调
5. 在 App 端，可以通过配置 manifest.json 来修改 action sheet 的样式

完整示例

// 用户头像操作菜单functionshowAvatarMenu(){uni.showActionSheet({itemList:["查看大图","保存图片","更换头像","取消关注"],itemColor:"#333333",success:function(res){switch(res.tapIndex){case0:previewAvatar();break;case1:saveAvatarToAlbum();break;case2:changeAvatar();break;case3:unfollowUser();break;}},fail:function(res){console.log("用户取消操作");},});}// 预览图片functionpreviewAvatar(){uni.previewImage({urls:["https://example.com/avatar.jpg"],});}// 保存图片到相册functionsaveAvatarToAlbum(){uni.saveImageToPhotosAlbum({filePath:"https://example.com/avatar.jpg",success:function(){uni.showToast({title:"保存成功",icon:"success",});},});}