小程序自定义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 返回操作数组的索引值。

转载于:https://my.oschina.net/u/3460260/blog/3075278