好资源导航 » 文章资讯 » 微信小程序实现弹框效果

微信小程序实现弹框效果

2023-07-24 05:18:05 462

本文实例为大家分享了微信小程序实现弹框效果的具体代码，供大家参考，具体内容如下

先上代码

wxml部分：


向上弹起



向下弹出










是否退出？
是否确定退出

确定
取消

wxss部分：

.top{
margin:0auto;
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)//打印出当前对象
varcurrentStatu=e.currentTarget.dataset.statu;//获取statu属性值
varcurrentNum=e.currentTarget.dataset.num;//获取num属性值
currentNum=parseInt(currentNum,10)//注意，这一步是将字符串转换为数字
this.util(currentStatu,currentNum)//将参数引入util方法
},
util:function(currentStatu,currentNum){
/*动画部分*/
//第1步：创建动画实例
varanimation=wx.createAnimation({
duration:200,//动画时长
timingFunction:"linear",//线性
delay:0//0则不延迟
});

//第2步：这个动画实例赋给当前的动画实例
this.animation=animation;
console.log(currentNum)
//第3步：执行第一组动画
animation.opacity(0).translateY(currentNum).step();

//第4步：导出动画对象赋给数据对象储存
this.setData({
animationData:animation.export()
})

//第5步：设置定时器到指定时候后，执行第二组动画
setTimeout(function(){
//执行第二组动画
animation.opacity(1).translateY(0).step();
//给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
this.setData({
animationData:animation
})

//关闭
if(currentStatu=="close"){
this.setData(
{
showModalStatus:false
}
);
}
}.bind(this),200)

//显示
if(currentStatu=="open"){
this.setData(
{
showModalStatus:true
}
);
}
},
})

这只是很简单的一个弹框，类似的左右弹出只需要将translateY改为translateX就行了。但是这段代码有一个问题就是当你点击关闭的时候，currentNum是不存在的，同时关闭弹框时currentNum我们不可以赋值，所以需要利用小程序的缓存APi来完善这个动效。

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现弹框效果

热门推荐

随机推荐