微信小程序----wx.showActionSheet(OBJECT)操作菜单（MUI操作表）

效果体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

DEMO下载

效果图

实现

1. 利用了微信小程序的wx.showActionSheet(OBJECT)操作菜单API实现菜单操作；
2. 利用wx.chooseVideo录制视频；
3. 利用wx.chooseImage选取本地图片；
4. 利用wx.previewImage进行图片预览。

WXML

  
    打开actionsheet
  


  DELETE
  SHARE

JS

Page({
  data: {
  
  },
  openActionsheet(){
    wx.showActionSheet({
      itemList: ['拍照或录像','选取现有的'],
      itemColor: '#007aff',
      success(res){
        console.log(res.tapIndex);
        if (res.tapIndex === 0){
          wx.chooseVideo({
            sourceType: ['camera'],
            success(res){
              console.log(res.tempFilePath);
            }
          })
        }else if (res.tapIndex === 1){
          wx.chooseImage({
            count: 3, // 设置最多三张
            sizeType: ['original', 'compressed'], 
            sourceType: ['album', 'camera'], 
            success (res) {
              var tempFilePaths = res.tempFilePaths;
              // 图片预览
              wx.previewImage({
                current: res.tempFilePaths[0],
                urls: res.tempFilePaths
              })
            }
          })
        }
      }
    })
  },
  openActionsheetDe(e){
    wx.showActionSheet({
      itemList: ['删除信息'],
      itemColor: '#FF3B30',
      success(res){
        wx.showToast({title: '删除成功！'})
      }
    })
  },
  openActionsheetSh(e){
    wx.showActionSheet({
      itemList: ['回复','转发','打印'],
      itemColor: '#007aff',
      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: '打印成功！' });
        }
      }
    })
  }
})

注意

wx.chooseVideo录制视频API必须采用预览微信小程序的模式才能调用！

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表