微信小程序入门（十二）：底部弹出菜单ActionSheet

Android和ios都会提供从底部弹出的，也就是点击屏幕某部分在屏幕底部会弹出列表框供用户进行选择，旧版微信使用组件<action-sheet>，在新版微信中，action-sheet组件组件被废弃，取而代之的是微信api提供的wx.showActionSheet接口，常用属性如下：

• itemList ：菜单项数组，也就是列表的选项，系统规定长度最大为6
• itemColor ：菜单项问祖的颜色，默认“#000000”
• success ：接口调用成功的回调函数
• fail：接口调用失败的回调函数
• complite：接口调用结束的回调函数
  在success回调函数传入一个对象参数，这个对象有两个参数，具体如下：
• cancle：用户选择取消按键，当该值为true是标志着用户选择的取消选项；
• tapIndex：用户点击非取消选项是返回用户选取的列表的序号，默认从0开始；

看完api现在就小试牛刀：
js:

// pages/message/message.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    itemList: ["菜单1","菜单2","菜单3","菜单4"]
  },

  showActionSheet(e) {
    wx.showActionSheet({
      itemList: this.data.itemList,

      success(e) {
        console.log("success")
        console.log(e)
        if(!e.camcle){
          console.log(e.tapIndex)
        }else{
          console.log("cancle")
        }
      },
      fail(e) {
        console.log("fail")
        console.log(e)
      },
      complete(e) {
        console.log("complete")
        console.log(e)
      }
    })
  }
})

wxml:

<view class='container'>
<text bindtap='showActionSheet'>显示底部菜单栏</text>
</view>

编译项目后进行操作如下：

12-1.png 12-2.gif