在微信小程序中,针对操作菜单的需求,官方文档提供了相应的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 返回操作数组的索引值。