uni-app 之 uni.showActionSheet

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

基本用法

javascript 复制代码

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 开始

示例代码

基础用法

javascript 复制代码

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

自定义文字颜色

javascript 复制代码

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

处理取消操作

javascript 复制代码

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

注意事项

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

完整示例

javascript 复制代码

// 用户头像操作菜单
function showAvatarMenu() {
  uni.showActionSheet({
    itemList: ["查看大图", "保存图片", "更换头像", "取消关注"],
    itemColor: "#333333",
    success: function (res) {
      switch (res.tapIndex) {
        case 0:
          previewAvatar();
          break;
        case 1:
          saveAvatarToAlbum();
          break;
        case 2:
          changeAvatar();
          break;
        case 3:
          unfollowUser();
          break;
      }
    },
    fail: function (res) {
      console.log("用户取消操作");
    },
  });
}

// 预览图片
function previewAvatar() {
  uni.previewImage({
    urls: ["https://example.com/avatar.jpg"],
  });
}

// 保存图片到相册
function saveAvatarToAlbum() {
  uni.saveImageToPhotosAlbum({
    filePath: "https://example.com/avatar.jpg",
    success: function () {
      uni.showToast({
        title: "保存成功",
        icon: "success",
      });
    },
  });
}