### [微信小程序组件：action-sheet显示操作菜单解读和分析](https://www.prosaas.cn/article/17550)

**Published:** 2018-05-25T05:53:41

**Author:** 5201314

**Excerpt:** action-sheet显示操作菜单的组件说明:显示操作菜单action-sheet显示操作菜单示例代码运行效…

**action-sheet显示操作菜单的组件说明:**

-   显示操作菜单
    

**action-sheet显示操作菜单示例代码运行效果如下：**

**![](https://img.php.cn//upload/image/485/720/355/1490937825402137.gif)**

下面是WXML代码：

<button type="primary" bindtap="actionSheetTap">弹出ActionSheet</button>

下面是JS代码：

actionSheetTap: function () {
    var itemList= \['A', 'B', 'C'\]
    wx.showActionSheet({
      itemList:itemList,
      success: function (res) {
        if (!res.cancel) {
          console.log(itemList\[res.tapIndex\])
        }
      }
    })
  }

**action-sheet显示操作菜单的主要属性：**

-   OBJECT参数说明：
    

|     |     |     |     |
| --- | --- | --- | --- |
| 属性  | 类型  | 必填  | 说明  |
| itemList | String Array | 是   | 按钮的文字数组，数组长度最大为6个 |
| itemColor | HexColor | 否   | 按钮的文字颜色，默认为”#000000” |
| success | Function | 否   | 接口调用成功的回调函数，详见返回参数说明 |
| fail | Function | 否   | 接口调用失败的回调函数 |
| complete | Function | 否   | 接口调用结束的回调函数（调用成功、失败都会执行） |

-   success返回参数说明：
    

|     |     |     |
| --- | --- | --- |
| 参数  | 类型  | 说明  |
| cancel | Boolean | 用户是否取消选择 |
| tapIndex | Number | 用户点击的按钮，从上到下的顺序，从0开始 |

以上就是微信小程序组件：action-sheet显示操作菜单解读和分析的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---