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

时间:2024-02-15 22:51:01

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

https://www.jianshu.com/p/d10b766300a7

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

安装

1.使用npm安装

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

  • 确保项目目录下有package.json文件,已有的跳过这一步
$ 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/actionsheet/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。

 

 

 
action-sheet效果

 

 

参数

属性数据类型说明选项默认值
actionShow Boolean 组件的初始显隐状态 必填
closeText String 取消按钮的文字 选填 取消

触发事件

eventName说明
actionHide action-sheet组件被关闭时触发的事件,除了点关闭按钮会触发外,点其他按钮都会关闭组件,都会触发该事件,按需使用

示例Demo

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



作者:一个没有感情的萝菠头
链接:https://www.jianshu.com/p/d10b766300a7
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。