微信小程序入门(十二):底部弹出菜单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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 先引入JS 文件 this.wxShare() 在created里调用 首先登陆微信公众号 JSSDK使用步骤 步...
    寄鱼予海与你阅读 6,800评论 1 3
  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 13,995评论 0 15
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,161评论 1 32
  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 3,455评论 0 0
  • 再锋利的剑,也斩不断缠绕的情丝;再快的遁地术,也逃不出恋人的眸子。 今天天气很好,好像“小阳春”。4点半钟,我就起...
    ZHANG顽石点头阅读 238评论 0 0