微信小程序里的弹出菜单效果怎样做
导读：这篇文章给大家分享的是“微信小程序里的弹出菜单效果怎样做”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“微信小程序里的弹出菜单效果怎样做”吧。...
这篇文章给大家分享的是“微信小程序里的弹出菜单效果怎样做”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“微信小程序里的弹出菜单效果怎样做”吧。
本文实例为大家分享了微信小程序实现弹出菜单的具体代码，供大家参考，具体内容如下
菜单
代码:
1.index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
isPopping: false,//是否已经弹出
animationPlus: {
}
,//旋转动画
animationcollect: {
}
,//item位移,透明度
animationTranspond: {
}
,//item位移,透明度
animationInput: {
}
,//item位移,透明度
//我的博客:http://blog.csdn.net/qq_31383345
//CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html
}
,
onLoad: function () {
}
,
//点击弹出
plus: function () {
if (this.data.isPopping) {
//缩回动画
popp.call(this);
this.setData({
isPopping: false
}
)
}
else {
//弹出动画
takeback.call(this);
this.setData({
isPopping: true
}
)
}
}
,
input: function () {
console.log("input")
}
,
transpond: function () {
console.log("transpond")
}
,
collect: function () {
console.log("collect")
}
}
)
//弹出动画
function popp() {
//plus顺时针旋转
var animationPlus = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
}
)
var animationcollect = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
}
)
var animationTranspond = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
}
)
var animationInput = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
}
)
animationPlus.rotateZ(180).step();
animationcollect.translate(-100, -100).rotateZ(180).opacity(1).step();
animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step();
animationInput.translate(-100, 100).rotateZ(180).opacity(1).step();
this.setData({
animationPlus: animationPlus.export(),
animationcollect: animationcollect.export(),
animationTranspond: animationTranspond.export(),
animationInput: animationInput.export(),
}
)
}
//收回动画
function takeback() {
//plus逆时针旋转
var animationPlus = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
}
)
var animationcollect = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
}
)
var animationTranspond = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
}
)
var animationInput = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
}
)
animationPlus.rotateZ(0).step();
animationcollect.translate(0, 0).rotateZ(0).opacity(0).step();
animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step();
animationInput.translate(0, 0).rotateZ(0).opacity(0).step();
this.setData({
animationPlus: animationPlus.export(),
animationcollect: animationcollect.export(),
animationTranspond: animationTranspond.export(),
animationInput: animationInput.export(),
}
)
}
2.index.wxml
!--index.wxml-->
image src="../../images/collect.png" animation="{
{
animationcollect}
}
" class="image-style" bindtap="collect">
/image>
image src="../../images/transpond.png" animation="{
{
animationTranspond}
}
" class="image-style" bindtap="transpond">
/image>
image src="../../images/input.png" animation="{
{
animationInput}
}
" class="image-style" bindtap="input">
/image>
image src="../../images/plus.png" animation="{
{
animationPlus}
}
" class="image-plus-style" bindtap="plus">
/image>
3.index.wxss
/**index.wxss**/
.image-style {
height: 150rpx;
width: 150rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
opacity: 0;
}
.image-plus-style {
height: 150rpx;
width: 150rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
z-index: 100;
}
感谢各位的阅读，以上就是“微信小程序里的弹出菜单效果怎样做”的内容了，通过以上内容的阐述，相信大家对微信小程序里的弹出菜单效果怎样做已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注网络，网络将为大家推送更多相关知识点的文章。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 微信小程序里的弹出菜单效果怎样做
本文地址： https://pptw.com/jishu/655048.html