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

Rattenking

发布于 2021-02-01 03:14:33

1.6K00

代码可运行

文章被收录于专栏：RattenkingRattenking

运行总次数：0

代码可运行

效果图

实现

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

WXML

<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>

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: '打印成功！' });
        }
      }
    })
  }
})