小程菜单按钮组件

去找小程序的菜单按钮，没有找到，于是自己摆弄了一个出来，虽然是个很简单的东西，考虑到可能还有其他人觉得写一个麻烦，现在把代码发一下，大神勿喷。

先看一下效果：

代码：
cc-mainbutton.js

 Component({
  lifetimes: {
    attached: function attached() {
      // 在组件实例进入页面节点树时执行
      this.animation = wx.createAnimation();
    },
    detached: function detached() {
      // 在组件实例被从页面节点树移除时执行
    }
  },

  data: {
    dial_btn_options_show: false
  },

  methods: {
    // 菜单按钮的动画
    rotate: function rotate() {
      if (this.data.dial_btn_options_show == false) {
        this.animation.rotate(-135).step();
        this.setData({
       	  dial_btn_options_show: true
          animation: this.animation.export()
        });
      } else {
        this.animation.rotate(0).step();
        this.setData({
       	 dial_btn_options_show: false
         animation: this.animation.export()
        });
      }
    },
    //点击子按钮
    click_option: function click_option(e) {
      switch (e.currentTarget.dataset.option) {
        case '1':
          break;

        case '2':
          break;

        case '3':
          break;

        default:
          break;
      }
    }
  }
});

cc-mainbutton.wxml

<view class="main_btn_ctn" style="width: 60px;height: 60px;">
  <image animation="{{animation}}" bindtap="rotate" class="dial-btn   {{dial_btn_options_show?'dial-btn-active':''}}"
    src="../static/images/main-btn.png" />

  <view bindtap="click_option" data-option="1"
    class="dial-btn--option flex-def flex-zCenter flex-cCenter flex-zTopBottom">
    <image style="height: 25px;width: 25px" class="" src="../static/images/add_shuoshuo.png" mode="widthFix" />

  </view>
  <view bindtap="click_option" data-option="2"
    class="dial-btn--option flex-def flex-zCenter flex-cCenter flex-zTopBottom">
    <image style="height: 25px;width: 25px" class="" src="../static/images/reflesh.png" mode="widthFix" />

  </view>
  <view bindtap="click_option" data-option="3"
    class="dial-btn--option flex-def flex-zCenter flex-cCenter flex-zTopBottom">
    <image style="height: 25px;width: 25px" class="" src="../static/images/go-top.png" mode="widthFix" />

  </view>
</view>

cc-mainbutton.wxss。

/* index/main-button/cc-mainbutton.wxss */

.flex-def {
  display: flex;
}
/* 主轴居中 */
.flex-zCenter {
  justify-content: center;
}
/* 侧轴居中 */
.flex-cCenter {
  align-items: center;
}
/* 主轴从上到下 */
.flex-zTopBottom {
  flex-direction: column;
}
.dial-btn {
  border: none;
  z-index: 7;
  position: absolute;
  height: 60px;
  width: 60px;
  left: 50%;
  top: 50%;
  margin: -30px 0 0 -30px;
}
/*子按钮初始位置隐藏在主按钮后面，透明度0*/
.dial-btn--option {
  background: yellowgreen;
  position: absolute;
  height: 46px;
  width: 46px;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  margin: -23px 0 0 -23px;
  transform: translate(0, 0);
  /* 过渡效果 */
  transition: opacity 0.25s ease-in-out, transform 0.25s ease 0s;
}
.dial-btn--option:nth-of-type(1) {
  z-index: 2;
  opacity: 0;
  transition-delay: 0.2s;
}
.dial-btn--option:nth-of-type(2) {
  z-index: 3;
  opacity: 0;
  transition-delay: 0.3s;
}
.dial-btn--option:nth-of-type(3) {
  z-index: 4;
  opacity: 0;
  transition-delay: 0.4s;
}
/* 通过nth-of-type定义每个子按钮的不同定位，设置透明度1 */
.dial-btn-active ~ .dial-btn--option:nth-of-type(1) {
  opacity: 1;
  transform: translate(-65px, 5px);
}
.dial-btn-active ~ .dial-btn--option:nth-of-type(2) {
  opacity: 1;
  transform: translate(-40px, -40px);
}
.dial-btn-active ~ .dial-btn--option:nth-of-type(3) {
  opacity: 1;
  transform: translate(5px, -65px);
}

预览网址：https://developers.weixin.qq.com/s/if7B8SmT7E8q