小程序wx.showActionSheet()操作菜单

最新推荐文章于 2025-06-08 09:36:11 发布

原创最新推荐文章于 2025-06-08 09:36:11 发布 · 7k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了微信小程序中`wx.showActionSheet` API的用法，展示了如何弹出操作菜单，并提供了实际应用场景和示例代码，帮助开发者实现用户交互功能。

<view class="tui-content">
  <view class="tui-show-name">
    <text class="tui-card-btn" bindtap="openActionsheet">打开actionsheet</text>
  </view>
</view>
<view class="tui-fixed-foot">
  <text class="tui-card-btn tui-fl" bindtap="openActionsheetDe">DELETE</text>
  <text class="tui-card-btn tui-fr" bindtap="openActionsheetSh">SHARE</text>
</view>

// pages/Sheet/Sheet.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  openActionsheet(){
    wx.showActionSheet({
      itemList: ['拍照或录像','选取现有的'],
      itemColor:'#007aff',
      success(res){
          console.log(res)
          if(res.tapIndex===0){
            wx.chooseVideo({
              sourceType: ['camera'],
              success(res){
                console.log(res)
              }
            })
          }else if(res.tapIndex===1){
            wx.chooseImage({
              count:3,
              sizeType: ['original', 'compressed'], 
              sourceType: ['album', 'camera'],
              success(res){
                console.log(res)
              } 

            })
          }
      }
    })
  },
  openActionsheetDe(e){
     wx.showActionSheet({
       itemList: ['删除信息'],
       itemColor: '#FF3B30',
       success(res){
         wx.showToast({
           title: '删除成功',
         })
       }
     })
  },
  openActionsheetSh(e){
    wx.showActionSheet({
      itemList: ['回复','转发','打印'],
      itemColor: '#FF3B30',
      success(res){
        if(res.tapIndex===0){wx.showToast({ title: '回复成功！' });}
        else if(res.tapIndex===1){wx.showToast({ title: '转发成功！' });}
        else if(res.tapIndex===2){wx.showToast({ title: '打印成功！' });}
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

效果图：在这里插入图片描述