刚才有童鞋询问如何给actionSheet前加图标，然鹅官方没提供该效果，那么我们自己做一个定制化的actionSheet吧。
还是那句话，有需求，咱们有空就去实现下，也算是能锻炼自己的动手能力，提升点知识面。。
先看看实现后的效果图：

首先自定义actionSheet组件。
wxml
简单的页面布局。

<view class="qts-as-mask qts-class-mask {{ visible ? 'qts-as-mask-show' : '' }}" bindtap="handleClickMask" catchtouchmove="preventTouchmove" ></view>
<view class="qts-class qts-as {{ visible ? 'qts-as-show' : '' }}" catchtouchmove="preventTouchmove">
  <view class="qts-as-header qts-class-header">
    <slot name="header"></slot>
  </view>
  <view class="qts-as-actions">
    <view class="qts-as-action-item" wx:for="{{actions}}" wx:key="name">
      <button hover-class="none" bindtap="handleClickItem" data-index="{{index}}" open-type="{{item.openType}}" class="qts-as-btn-qts ptp_exposure" >
          <image wx: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" wx:if="{{showCancel}}">
    <button hover-class="none" class="qts-as-cancel-btn" bindtap="handleClickCancel">取消</button>
  </view>
</view>

js处理：

定制了三种功能：

• 是否需要隐藏取消按钮
• 是否需要点击蒙层关闭actionSheet
• 内容外部组件可配置

Component({
  externalClasses: ['qts-class', 'qts-class-mask', 'qts-class-header'],

  options: {
    multipleSlots: true
  },

  properties: {
    showCancel: {
      type: Boolean,
      value: true
    },
    visible: {
      type: Boolean,
      value: false
    },
    actions: {
      type: Array,
      value: []
    },
    maskClosable: {
      type: Boolean,
      value: true
    }
  },

  methods: {
    handleClickMask() {
      if (!this.data.maskClosable) return;
      this.handleClickCancel();
    },
    preventTouchmove() {},
    handleClickItem(e) {
      const dataset = e.currentTarget.dataset || ''
      this.triggerEvent('click', dataset)
      this.triggerEvent('cancel');
    },
    handleClickCancel() {
      this.triggerEvent('cancel');
    }
  }
})

应用的页面引用该组件：

<view class="container" bindtap="handleClick">点我弹出actionSheet</view>
<!-- 
   visible 弹窗显隐藏
   show-cancel 是否显示取消按钮
   bind:cancel  取消按钮点击回调
   bind:click 单个item点击回调
   mask-closable 点击蒙层是否关闭弹窗
 -->
<action-sheet visible="{{visible}}" actions="{{actions}}" show-cancel bind:cancel="handleClick" bind:click="handleClickItem" mask-closable="{{true}}" />

const app = getApp()

Page({
  data: {
  //可配置items选项，支持传入button的openType属性
    actions: [{
        name: '生成图片',
        icon: 'https://qiniu-image.qtshe.com/201809104.png'
      },
      {
        name: '转发给好友或群聊天',
        icon: 'https://qiniu-image.qtshe.com/201809105.png',
        openType: 'share'
      }
    ],
    visible: false
  },
  //弹窗显隐藏
  handleClick() {
    this.setData({
      visible: !this.data.visible
    })
  },
  //单个item点击
  //actionsheet内的点击方法
  handleClickItem({detail}) {
    if (detail.index === 0) {
      console.log(111)
       //第一个选项被点击
    }
  },
})

以上就是一个自定义actionSheet的实现方式以及引用方式。。

老规矩，附上代码片段。

https://developers.weixin.qq.com/s/Bhc0Sjmw7AgW