這篇文章主要為大家展示了微信小程序如何實現(xiàn)彈框效果，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
創(chuàng)新互聯(lián)建站專注于臨夏企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。臨夏網(wǎng)站建設(shè)公司,為臨夏等地區(qū)提供建站服務(wù)。全流程按需設(shè)計網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
先上代碼
wxml部分：
向上彈起 向下彈出 是否退出？ 是否確定退出 確定 取消
wxss部分：
重慶分公司
重慶分公司
.top {
margin: 0 auto;
margin-top: 50rpx;
background: #1da0ee;
color: #fff;
width: 50vw;
text-align: center
}
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}
/*content*/
.drawer_box {
width:600rpx;
height:300rpx;
overflow:hidden;
position:fixed;
top:50%;
left:50%;
z-index:1001;
background:#FAFAFA;
margin-top:-150rpx;
border-radius:3px;
margin-left:-300rpx;
}
.modalBox {
padding: 60rpx;
font-size: 30rpx;
}
.modalConf {
font-size: 24rpx;
color: #999;
margin-top: 20rpx;
}
.hidePick {
text-align: right;
margin-top: 50rpx;
}
.hideModal {
color: #1da0ee;
margin-left: 130rpx;
}js部分：
Page({
data: {
},
// 自定義彈框
powerDrawer: function (e) {
console.log(e) //打印出當(dāng)前對象
var currentStatu = e.currentTarget.dataset.statu; //獲取statu屬性值
var currentNum = e.currentTarget.dataset.num;//獲取num屬性值
currentNum = parseInt(currentNum , 10) //注意，這一步是將字符串轉(zhuǎn)換為數(shù)字
this.util(currentStatu,currentNum) //將參數(shù)引入util方法
},
util: function (currentStatu,currentNum) {
/* 動畫部分 */
// 第1步：創(chuàng)建動畫實例
var animation = wx.createAnimation({
duration: 200, //動畫時長
timingFunction: "linear", //線性
delay: 0 //0則不延遲
});
// 第2步：這個動畫實例賦給當(dāng)前的動畫實例
this.animation = animation;
console.log(currentNum)
// 第3步：執(zhí)行第一組動畫
animation.opacity(0).translateY(currentNum).step();
// 第4步：導(dǎo)出動畫對象賦給數(shù)據(jù)對象儲存
this.setData({
animationData: animation.export()
})
// 第5步：設(shè)置定時器到指定時候后，執(zhí)行第二組動畫
setTimeout(function () {
// 執(zhí)行第二組動畫
animation.opacity(1).translateY(0).step();
// 給數(shù)據(jù)對象儲存的第一組動畫，更替為執(zhí)行完第二組動畫的動畫對象
this.setData({
animationData: animation
})
//關(guān)閉
if (currentStatu == "close") {
this.setData(
{
showModalStatus: false
}
);
}
}.bind(this), 200)
// 顯示
if (currentStatu == "open") {
this.setData(
{
showModalStatus: true
}
);
}
},
})這只是很簡單的一個彈框，類似的左右彈出只需要將translateY改為translateX就行了。 但是這段代碼有一個問題就是當(dāng)你點擊關(guān)閉的時候，currentNum是不存在的，同時關(guān)閉彈框時currentNum我們不可以賦值 ， 所以需要利用小程序的緩存APi來完善這個動效。
以上就是關(guān)于微信小程序如何實現(xiàn)彈框效果的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。
