@minidesign/popmenu
Install
- 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包
- 如果你的不支持，那么可以先下载下来，在手动拷贝到你的
components/popmenu文件夹下，在使用的细节上调整一下就行了。
npm install --save @minidesign/popmenu- 【微信开发者工具】->【工具】-> 【构建 npm】
- ok. （别忘记执行【构建 npm】步骤）
Usage
[page].json
{
"usingComponents": {
"popmenu": "@minidesign/popmenu"
}
}[page].wxml
<view class="item right">
<popmenu
menus="{{['喜欢', '评论']}}"
bindselect="onSelect"
default-width="{{113}}"
payload="{{ {hello: true} }}"
>
<image class="image" src="./three-point.png"></image>
</popmenu>
</view>
<view class="item left">
<popmenu
menus="{{['喜欢', '评论']}}"
direction="right"
default-width="{{113}}"
bindselect="onSelect"
payload="{{ {hello: true} }}"
>
<image class="image" src="./three-point.png"></image>
</popmenu>
</view>[page].js
Page({
onSelect(e) {
const { index, menu, payload } = e.detail;
wx.showModal({
title: `选择了第${index + 1}个菜单: ${menu}`,
content: JSON.stringify(payload, null, 2)
});
}
});options
| Name | Type | Default | Description |
|---|---|---|---|
| menus | String[] | [] |
菜单列表 |
| direction | String | left |
按钮方向，`left |
| bindselect | Function | null | 选择菜单监听函数，detail: { index, menu, payload }
|
| visible | Boolean | false |
手动控制是否显示 |
| payload | Object | {} |
荷载 |
| default-width | Number | null |
设置菜单宽度，显示第一次点击时候的动画，不设置则从第二次开始拥有动画 |
| container-class | CSS Class Name | '' |
容器样式 |