微信小程序自定义组件——底部菜单ActionSheet w

微信小程序自定义组件——底部菜单ActionSheet

写这个自定义ActionSheet组件，和自定义modal一样，有些开放能力必须绑定在button上，而我们有时候又会有在底部上拉菜单中实现转发功能的需求，或者别的微信开放能力，小程序原生的ActionSheet依然无法实现，故此组件应运而生。

直接使用小程序开发工具自带的构建npm，请按下面几个步骤引入：

$ npm init 安装

$ npm i wx-miniprogram-actionsheet

在小程序开发者工具中依次找到并点击工具->构建npm，构建完成后你的项目目录会多出一个miniprogram_npm目录，请确保项目设置已勾选使用npm模块

在使用组件的页面配置json中使用

{ "usingComponents": { "action-sheet": "wx-miniprogram-actionsheet" } } 2.不使用任何构建工具的普通小程序安装

直接拷贝wx-miniprogram-actionsheet仓库中的miniprogram_dist目录下的代码到项目中的放组件的目录中去，之后使用方法和小程序自定义组件一样了。同样需要在页面配置json中声明：

{ "usingComponents": { "action-sheet": "../components/mysheet/index" } } 使用

wxml文件中

<action-sheet actionShow="{{showStatus}}" closeText="关闭" bind:actionHide="onActionHide"> <!-- slot ActionSheet 菜单项 只能是button 或 navigator --> <navigator url="/pages/index/index">我是navigator: 回首页</navigator> <button bindtap="handleBtn">我是普通按钮</button> <button open-type="share">开放能力: 转发</button> </action-sheet>

js文件中

// 只列出核心代码 Page({ data: { actionStatus: false }, onActionHide: function () { console.log('ActionSheet关闭了') } })

菜单项写进<action-sheet></action-sheet>标签里即可，菜单项 只能是button 或 navigator。

微信小程序自定义组件使用示例整合