一个菜单按钮
去找小程序的菜单按钮，没有找到，于是自己摆弄了一个出来，虽然是个很简单的东西，考虑到可能还有其他人觉得写一个麻烦，现在把代码发一下，大神勿喷。
先看一下效果：
[图片]
代码：
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
