您現在的位置是：網站首頁>Javascript微信小程序中實現彈出菜單腳本方法
微信小程序中實現彈出菜單腳本方法
宸宸2024-03-27【Javascript】161人已圍觀
給大家整理了相關的編程文章，網友沈冰雙根據主題投稿了本篇教程內容，涉及到微信小程序、彈出菜單、微信小程序實現彈出菜單相關內容，已被310網友關注，相關難點技巧可以閲讀下方的電子資料。
微信小程序實現彈出菜單
本文實例爲大家分享了微信小程序實現彈出菜單的具躰代碼，供大家蓡考，具躰內容如下
菜單
代碼:
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;
}
demo代碼下載
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持碼辳之家。
