评论

一个菜单按钮

一个简单的菜单按钮组件

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

先看一下效果:

代码:
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

最后一次编辑于  2019-06-04  
点赞 4
收藏
评论

3 个评论

  • 凌河水®
    凌河水®
    2019-06-10

    引用后如何获取

    data-option


    2019-06-10
    赞同
    回复 2
    • 我是小学生大王
      我是小学生大王
      2019-06-10

      在引用页面获取吗?这样:

      // 子组件事件

      click_option: function click_option(e) {

      this.triggerEvent('father_event', e.currentTarget.dataset.option)

      }


      <!-- 父组件 wxml-->

      <main-btn bind:father_event="father_event"></main-btn>


      // 父组件事件

      father_event: function(e){

      console.log(e.detail)

      }



      2019-06-10
      回复
    • 凌河水®
      凌河水®
      2019-06-10回复我是小学生大王

      成功,非常感谢

      2019-06-10
      回复
  • 杭州弧途科技有限公司
    杭州弧途科技有限公司
    2019-06-04

    不过还是 阔以哈

    2019-06-04
    赞同
    回复
  • 杭州弧途科技有限公司
    杭州弧途科技有限公司
    2019-06-04

    这个效果 《青团小天气助手》 这里看到过

    2019-06-04
    赞同
    回复
登录 后发表内容