怎么在微信小程序中彈出菜單？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)2013年至今，公司自成立以來(lái)始終致力于為企業(yè)提供官網(wǎng)建設(shè)、移動(dòng)互聯(lián)網(wǎng)業(yè)務(wù)開(kāi)發(fā)（小程序設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、重慶APP開(kāi)發(fā)等），并且包含互聯(lián)網(wǎng)基礎(chǔ)服務(wù)（域名、主機(jī)服務(wù)、企業(yè)郵箱、網(wǎng)絡(luò)營(yíng)銷(xiāo)等）應(yīng)用服務(wù)；以先進(jìn)完善的建站體系及不斷開(kāi)拓創(chuàng)新的精神理念，幫助企業(yè)客戶(hù)實(shí)現(xiàn)互聯(lián)網(wǎng)業(yè)務(wù)，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶(hù)的一致贊譽(yù)。

1.index.js

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
 data: {
 isPopping: false,//是否已經(jīng)彈出
 animationPlus: {},//旋轉(zhuǎn)動(dòng)畫(huà)
 animationcollect: {},//item位移,透明度
 animationTranspond: {},//item位移,透明度
 animationInput: {},//item位移,透明度
 //我的博客:http://blog.csdn.net/qq_31383345
 //CSDN微信小程序開(kāi)發(fā)專(zhuān)欄:http://blog.csdn.net/column/details/13721.html
 },
 onLoad: function () {

 },
 //點(diǎn)擊彈出
 plus: function () {
 if (this.data.isPopping) {
  //縮回動(dòng)畫(huà)
  popp.call(this);
  this.setData({
  isPopping: false
  })
 } else {
  //彈出動(dòng)畫(huà)
  takeback.call(this);
  this.setData({
  isPopping: true
  })
 }
 },
 input: function () {
 console.log("input")
 },
 transpond: function () {
 console.log("transpond")
 },
 collect: function () {
 console.log("collect")
 }
})



//彈出動(dòng)畫(huà)
function popp() {
 //plus順時(shí)針旋轉(zhuǎn)
 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(),
 })
}
//收回動(dòng)畫(huà)
function takeback() {
 //plus逆時(shí)針旋轉(zhuǎn)
 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;
}

關(guān)于怎么在微信小程序中彈出菜單問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

分享文章：怎么在微信小程序中彈出菜單
地址分享：http://www.rwnh.cn/article36/ihgpsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站策劃、自適應(yīng)網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)、服務(wù)器托管、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)