小程序自定義actionSheet組件

在微信小程序中，針對操做菜單的需求，官方文檔提供了相應的api，以下圖所示。

可是小程序自帶的操做菜單沒有 「標題」 這麼一個參數，不能在操做菜單的頂部顯示自定義的標題，由於這麼一個需求，筆者本身擼了一個 actionSheet 組件，效果以下。

接下來是源碼展現。

首先是 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'>取 消</view>
</view>
<view class='mask' wx:if='{{isOpened}}' bindtap='cancel'></view>

而後是 js 源碼

// component/lzy-actionsheet/lzy-actionsheet.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    isOpened: Boolean,
    list: Array,
    title: String
  },

  /**
   * 組件的初始數據
   */
  data: {
    list: ['操做1', '操做2']
  },

  /**
   * 組件的方法列表
   */
  methods: {
    cancel(){
      this.setData({
        isOpened: false
      })
      wx.showTabBar()
    },

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

最後是 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;}

頁面的調用

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

其中，bindselect 事件在用戶點擊操做項目後觸發， e.detail 返回操做數組的索引值。