微信小程序创建自定义带图标的底部弹框

正常情况下，小程序中要从页面底部弹出选择框的话，首要选择是

wx.showActionSheet({
itemList: ['A', 'B', 'C'],
      success: function(res) {
      }
}）

该方法运行后样式在iOS机子上显示为如下图，在android机子上显示的是没有“取消”按钮的，并且弹出框并不在页面底部，而是在页面中间。

现在我想要的效果是在A B C每一项选项前面各添加一个图标，但是不知道wx.showActionSheet这种方法应该怎么实现，所以换了另外一种实现方式：
在页面上定义一个按钮给一个点击事件，然后定义要弹出的页面布局：

<view class="page">
    <form class="page__bd">
      <view class="button-sp-area">
        <button class="weui-btn mini-btn" bindtap="dialogBottom" style="width:170px;" type="default" size="mini">
          弹出选择框
        </button>
        <!--以下是弹出框中要显示的内容-->
        <view class='classcommon1' animation="{{animationData}}" hidden="{{!isShowModal}}">
          <view class="classcommon2" id="pay" type="default" size="mini" bindtap="payWX">
            <image src='/utils/images/ico-wx.png'></image>
            微信支付
          </view>
          <view class="classcommon2" id="pay" type="default" size="mini" bindtap="payZFB">
            <image src='/utils/images/ico-zfb.png'></image>
            支付宝支付
          </view>
          <view class="classcommon2" id="pay" type="default" size="mini" bindtap="hideModal">
            取消
          </view>
        </view>
      </view>
    </form>

.classcommon1{
  width: 100%;
  height: 300rpx;
  background-color: white;
  margin-bottom: -153px;
  position: fixed;
  bottom: 0;
}

.classcommon2{
  color: black;
  text-align: center;
  height: 100rpx;
  width: 100%;
  line-height: 100rpx;
  border-bottom: 1rpx solid #f7f7f7;
}

在js文件中实现定义的点击事件，在页面的data中定义变量，此时就可以对弹窗的每一项点击事件加以实现了

    animationData: {},
    isShowModal: false,

  dialogBottom: function() {
    var that = this;
    that.data.animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })
    this.animation = that.data.animation
    that.data.animation.translate(0, -153).step();
    this.setData({
      animationData: that.data.animation.export(),
      isShowModal: true
    })
  },
  hideModal: function() {
    var that = this;
    that.data.animation.translate(0, 0).step();
    this.setData({
      animationData: that.data.animation.export()
    })
  },
  payWX: async function () {
    conssole.log('选了微信')
  },
  payZFB: function() {
    console.log('选了支付宝')
  },

此时的样式如下

总觉得使用此种方式还是很麻烦，不知道微信有没有提供类似于wx.showActionSheet这种的简洁能实现的方式，网上搜了大多数都是不带图标的，有其他方式能实现的话还请网友分享一下谢谢了哈

20200402补充

以上这种方式在页面上使用时，若页面最外面是view，则会导致在弹出弹框的同时后面页面的内容过长时是可以上下滑动，而且页面内容会与弹框内容重叠而导致看不清啥是啥（如上），若页面最外面是scroll-view则可通过弹出弹框时设置页面scroll-y为false禁止页面滑动，等弹框关闭时再设置解除就行。还有一种方法，参考代码片段https://developers.weixin.qq.com/s/vm87Kjm87qgX
效果如下：