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

DEMO下载

效果图

实现

利用了微信小程序的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: '打印成功！' });
}
}
})
}
})

注意

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

更多微信小程序实例