怎么在微信小程序中弹出菜单

怎么在微信小程序中弹出菜单？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联2013年至今，公司自成立以来始终致力于为企业提供官网建设、移动互联网业务开发（小程序设计、手机网站建设、重庆APP开发等），并且包含互联网基础服务（域名、主机服务、企业邮箱、网络营销等）应用服务；以先进完善的建站体系及不断开拓创新的精神理念，帮助企业客户实现互联网业务，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞誉。

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;
}

关于怎么在微信小程序中弹出菜单问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

分享文章：怎么在微信小程序中弹出菜单
地址分享：/article36/ihgpsg.html

成都网站建设公司_创新互联，为您提供网站收录、网站策划、自适应网站、网站营销、服务器托管、网站内链

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联