H5actionButton

功能描述

H5actionButton实现了底部弹出菜单的功能。菜单的弹出和消失带有相应的动画

依赖模块

无

快速使用

  1. var actionButton = new ActionButton({
  2.   tapHidden: true,
  3.   items: [{
  4.     img: './img/wx.png',
  5.     text: '微信'
  6.   }, {
  7.     img: './img/wx_circle.png',
  8.     text: '朋友圈'
  9.   }, {
  10.     img: './img/wx_circle.png',
  11.     text: '朋友圈'
  12.   }, {
  13.     img: './img/wx_circle.png',
  14.     text: '朋友圈'
  15.   }, {
  16.     img: './img/wx_circle.png',
  17.     text: '朋友圈'
  18.   }, {
  19.     img: './img/wx_circle.png',
  20.     text: '朋友圈'
  21.   }]
  22. }),
  23. itemClick: function(item) {
  24.   console.log(item.index)//被点击按钮的索引值
  25. }

配置项

tapHidden

  • 类型：Boolean
  • 默认值：false
  • 作用：点击阴影是否自动隐藏弹出菜单

  • 是否必传：否

    autoHide

  • 类型：Boolean

  • 默认值：true
  • 作用：点击菜单的选项是否自动隐藏弹出菜单

  • 是否必传：否

    items

  • 类型：Array

  • 默认值：[]
  • 作用：弹出菜单的内容

  • 是否必传：否

    itemClick

  • 类型：Function

  • 默认值：无
  • 作用：点击菜单的内容时会触发该函数
  • 是否必传：否

方法

显示弹出菜单

  1. actionButton.show()

隐藏弹出菜单

  1. actionButton.hide()

特别说明

无