微信小程序-卫星菜单
原创
微信菜单款式千千万万，主要分顶部、底部、垂直横栏。今天特发奇想做个类似安卓的卫星菜单吧。之前网上都很多教程，但需要的时候就找不到，于是就写这篇文章记录一下。
首先卫星菜单就是以一个为中心，当用户点击主图标，就扩散出分支菜单。目前只做了一层，当然有时间的可以研究多层。废话少说，上代码实在。。
首先要在JS里增加：
data: {
isShow: false,
animationContact: {},
animationSave: {},
animationShare: {},
animationHome: {},
animationModal: {},
animationContainer:{}
},
contorlAnimate(){
if(this.data.isShow){
this.closeAnimate()
}else{
this.showAnimate()
}
},
closeAnimate() {
var animationModal = wx.createAnimation({
duration: 200,
timingFunction: 'ease-in'
})
animationModal.opacity(0).scale(0.0, 0.0).step()
var animationContact = wx.createAnimation({
duration: 200,
timingFunction: 'ease-in'
})
animationContact.opacity(0).scale(0.0, 0.0).translateX(0).step()
var animationSave = wx.createAnimation({
duration: 200,
timingFunction: 'ease-in'
})
animationSave.opacity(0).scale(0.0, 0.0).translateX(0).step()
var animationShare = wx.createAnimation({
duration: 200,
timingFunction: 'ease-in'
})
animationShare.opacity(0).scale(0.0, 0.0).translateX(0).step()
var animationHome = wx.createAnimation({
duration: 200,
timingFunction: 'ease-in'
})
animationHome.opacity(0).scale(0.0, 0.0).translateX(0).step()
this.data.isShow = false
this.setData({
animationContact: animationContact.export(),
animationSave: animationSave.export(),
animationShare: animationShare.export(),
animationHome: animationHome.export(),
animationModal: animationModal.export()
})
},
showAnimate() {
var animationModal = wx.createAnimation({
duration: 200,
timingFunction: 'ease-out'
})
animationModal.opacity(0.0).scale(300, 300).step()
var animationContact = wx.createAnimation({
duration: 200,
timingFunction: 'ease-out'
})
animationContact.opacity(1).scale(0.8, 0.8).translateX(-120).step()
var animationSave = wx.createAnimation({
duration: 200,
timingFunction: 'ease-out'
})
animationSave.opacity(1).scale(0.8, 0.8).translateX(-104).translateY(-60).step()
var animationShare = wx.createAnimation({
duration: 200,
timingFunction: 'ease-out'
})
animationShare.opacity(1).scale(0.8, 0.8).translateX(-60).translateY(-104).step()
var animationHome = wx.createAnimation({
duration: 200,
timingFunction: 'ease-out'
})
animationHome.opacity(1).scale(0.8, 0.8).translateX(0).translateY(-120).step()
this.data.isShow = true
this.setData({
animationContact: animationContact.export(),
animationSave: animationSave.export(),
animationShare: animationShare.export(),
animationHome: animationHome.export(),
animationModal: animationModal.export()
})
},
clickHome(){
wx.showToast({
icon:"none",
title: '点击了Home',
})
},
clickShare() {
wx.showToast({
icon: "none",
title: '点击了分享',
})
},
clickContact() {
wx.showToast({
icon: "none",
title: '点击了联系',
})
},
clickSave() {
wx.showToast({
icon: "none",
title: '点击了保存',
})
}上了一大堆代码，就做展示wxml的代码了
<view id="modal" animation="{{animationModal}}" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;border-radius:40rpx;opacity: 0;background:#000" bindtap="closeAnimate">
</view>
<image id="contact" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./contact.png" animation="{{animationContact}}" bindtap="contact" bindtap="clickContact"></image>
<image id="share" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./share.png" animation="{{animationShare}}" bindtap="clickShare"></image>
<image id="save" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./save.png" animation="{{animationSave}}" bindtap="clickSave"></image>
<image id="home" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./home.png" animation="{{animationHome}}" bindtap="clickHome"></image>
<image style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;" src="./float.png" bindtap="contorlAnimate"></image>
上一下样式wxss
.releaseBtn {
position: fixed;
bottom: 50px;
right: 30px;
}
.releaseIcon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: solid 1rpx #FFC64B;
padding: 20rpx;
}好，核心就这样。。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
作者已关闭评论
推荐阅读
腾讯云开发者
