In the wechat applet, the official document provides the corresponding api for the operation menu requirements, as shown in the figure below.

However, there is no "title" parameter in the operation menu of the applet, and the user-defined Title cannot be displayed at the top of the operation menu. Because of this requirement, the author has built an action sheet component, and the effect is as follows.

Next is the source code display.

The first is the code for wxml.

<!--component/lzy-actionsheet/lzy-actionsheet.wxml-->
<view class="container" wx:if='{{isOpened}}'>
  <view class='row bg-red'>{{title}}</view>
  <view class='row' wx:for='{{list}}' wx:key data-idx='{{index}}' bindtap='handClick'>{{item}}</view>
  <view class='row text-gray margin-top' bindtap='cancel'>Cancellation</view>
</view>
<view class='mask' wx:if='{{isOpened}}' bindtap='cancel'></view>

Then js source code

// component/lzy-actionsheet/lzy-actionsheet.js
Component({
  /**
   * Property list of component
   */
  properties: {
    isOpened: Boolean,
    list: Array,
    title: String
  },

  /**
   * Initial data of components
   */
  data: {
    list: ['Operation 1', 'Operation 2']
  },

  /**
   * Method list for component
   */
  methods: {
    cancel(){
      this.setData({
        isOpened: false
      })
      wx.showTabBar()
    },

    handClick(e) {
      this.triggerEvent('select', e.currentTarget.dataset.idx);
    },
  }
})

Finally, the code of wxss

/* component/lzy-actionsheet/lzy-actionsheet.wxss */
.mask{
  background:#000;opacity:0.5;position:fixed;top:0;right:0;bottom: 0;left:0;z-index:600
}
.row{
  width: 100%;text-align: center;line-height: 50px;background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.text-gray{color: gray}
.bg-red{color:#fff;background-color:#e54d42;}
.margin-top{margin-top:10px}
.container{background:#f0f0f0;position:fixed;width:100vw;bottom:0;z-index:888;
  font-size:30rpx;}

Page call

<actionsheet isOpened='{{isOpened}}' list='{{sheetList}}' title='{{title}}' bindselect='selectAction'></actionsheet>

The bindselect event is triggered after the user clicks the operation item, and e.detail returns the index value of the operation array.