微信小程序api视频课程-界面-交互-wx.showActionSheet操作菜单的使用

红太狼 2024-02-19 19:19 34阅读 0赞

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]  
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

### wxml代码 ###

wx.showActionSheet(Object object) 显示操作菜单
    
    <button bindtap="cd01">操作菜单01</button>
    
    <button bindtap="cd02">操作菜单02</button>

### js代码 ###

/**
       * 页面的初始数据
       */
      data: {
        chengshi:["浙江","江苏","上海"]
      },
      cd01:function(){
        wx.showActionSheet({
          itemList: ["A", "B", "C", "D", "E", "F"],//数组长度最大为6
        })
      },
      cd02: function () {
        var tmp = this.data.chengshi
        wx.showActionSheet({
          itemList: this.data.chengshi,
          success(res){
            console.log(res.tapIndex)
            console.log(tmp[res.tapIndex])
          },
          fail(res){
            console.log(res.errMsg)
          }
        })
      },

[欢迎大家收看我的视频教程：微信小程序常用API使用][API]  
![界面-交互-wx.showActionSheet操作菜单][-_-wx.showActionSheet]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c95ec5eb5aec4a8eb59bb5814b16f7cb.png
[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[API]: https://ke.qq.com/course/383235?tuin=2b10d56
[-_-wx.showActionSheet]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1939f609273d402daf757e412a4fe366.png