ActionSheet就是下图展示:
小程序有提供官方API,调用操作菜单还是比较简单的:
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function(res) {
console.log(res.tapIndex)
},
fail: function(res) {
console.log(res.errMsg)
}
})
然后会返回tapIndex
,也就是用户点击的按钮,从上到下的顺序,从0开始。看上去非常简单,但实际上这个ActionSheet
中的菜单本身不能绑定任何事件,只能通过用户的选择结果来处理。也不能在菜单上预设参数,参数要提前设置在data
中。
而微信小程序的分享触发只有一个方法,就是通过button组建,使用open-type="share"
来触发,这样通过小程序原生功能是不可能实现通过ActionSheet
来触发分享功能了。
原生的办法不行,那就只能自定义ActionSheet
了,好在小程序提供的组件还比较丰富,自定义也不是很麻烦。
wxml
结构:
<action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet">
<action-sheet-item open-type="share">
<button open-type="share">分享给好友</button>
</action-sheet-item>
<action-sheet-item>生成分享卡片</action-sheet-item>
<action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>
js
代码:
openActionSheet(e){
var self = this;
self.setData({
actionSheetHidden: !self.data.actionSheetHidden
});
},
listenerActionSheet: function () {
var self = this;
self.setData({
actionSheetHidden: !self.data.actionSheetHidden
})
},
这样就自定义了一个操作菜单,并且可以直接触发分享功能。
这里还有个坑,就是触发分享需要使用button
组件,默认样式是有一个边框的,通过常规的border:0
并不能去掉这个边框,原因是这个样式是写在button:after
伪类里的,需要对button:after
进行样式重写才能去掉这个边框。可以说是相当的坑了。