目前支付宝小程序的安卓和IOS的UI样式有一些差异较大，然而设计却不依不饶的让你按照设计图来。使用官方的actionSheet会发现安卓在中间弹出，而IOS从底部往上弹出
为了应对这个差异我们手动撸一个actionSheet吧。
效果图如下。
首先在需要的地方引用该组件（因文章内规则限制，只能先截图了）：
<button class="container" onTap="handleTogger">点我弹出actionSheet</button> <action-sheet visible="{{visible}}" actions="{{actions}}" show-cancel onCancle="handleTogger" onTogger="handleToggerItem" mask-closable="{{true}}" />
主页面JS，主要做actionsheet的显示与隐藏，以及点击单个选项后拿到下标做后续处理。
Page({ data: { visible: false, actions: [{ name: '生成图片', icon: 'https://qiniu-image.qtshe.com/201809104.png' }, { name: '转发给朋友或生活圈', icon: 'https://qiniu-image.qtshe.com/201809105.png', openType: 'share' //支持传入button的openType属性 }] }, handleTogger() { this.setData({ visible: !this.data.visible }) }, handleToggerItem(e) { console.log('当前下标' + e.index) if (e.index === 0) { //第一个选项 } }, });
至于自定义组件内操作如下：
通过外部传递进来的字段判断是否显示icon，是否显示取消按钮，是否点击蒙层关闭等效果：
<view class="qts-as-mask qts-class-mask {{ visible ? 'qts-as-mask-show' : '' }}" onTap="handleToggerMask" disable-scroll></view> <view class="qts-class qts-as {{ visible ? 'qts-as-show' : '' }}" disable-scroll> <view class="qts-as-header qts-class-header"> <slot name="header"></slot> </view> <view class="qts-as-actions"> <view class="qts-as-action-item" a:for="{{actions}}" a:key="name"> <button hover-class="none" onTap="handleToggerItem" data-index="{{index}}" open-type="{{item.openType}}" class="qts-as-btn-qts" > <image a:if="{{item.icon}}" src="{{item.icon}}" class="qts-btn-image" /> <view class="qts-as-btn-text">{{item.name}}</view> </button> </view> </view> <view class="qts-as-cancel" a:if="{{showCancel}}"> <button hover-class="none" class="qts-as-cancel-btn" onTap="handleToggerCancel">取消</button> </view> </view>
最后附上代码片段：点击可直接查看效果。
https://minicode.alipay.com/share/4d1a75da-cb6b-40f1-897b-469c8eadf117
