本文实例为大家分享了微信小程序带动画弹窗的具体代码，供大家参考，具体内容如下

基本效果如下：

具体实现如下：

第一步：

新建一个成分文件夹，用于存放我们以后开发中的所用组件，在成分组件中新建一个弹出文件夹来存放我们的弹窗组件，在弹出下右击新建成分并命名为弹出后，会生成对应的json wxml wxss js 4个文件，也就是一个自定义组件的组成部分，此时项目结构应该如下图所示：

第二步上代码：

popup.wxml

视图隐藏='{{!flag } } ' class=' container ' style=' view bind tap=' _ error ' class=' wrap { { wrap animate } } ' style=' background : rgba(0，0，0，{ { bgOpacity } })；/view view class=' popup-container { { popupAnimate } } ' view class=' wx-popup-title ' { title } }/view view class=' wx-popup-con ' { content } }/view view class=' wx-popup-BTN ' text class=' BTN-no ' bind tap=' _ error ' { BTN _ no } }/text text class=' BTN-ok ' bind tap=' _ success ' { BTN _ ok } }/text/view image bind tap=' error '././图像/关闭。png ' mode=' width fix ' class=' BTN-colse '/image/view/view popup。页面样式表。容器{ font-size 3:15 pxcolor: # 666font-weight:粗体；z索引：2;位置：固定；宽度宽度：100大众高度：100 VH}.包装{ position : fixed top :0 left :0底部：0;右：0}。弹出容器{位置：固定；左侧： 50%;前：名100%；宽度： 80%;最大宽度： 600 rpxborder: 2rpx固体# cccborder-radius : 10 rpx；箱式： bor dre-box；transform: translate(-50%，-50%)；背景# fffopa city 3360 0；}.wx-popup-title {宽度： 100%；padd : 20 rpx 0；文本对齐：中心；font-size : 40 rpx边框-底部： 2rpx实心# 89cfea}。wx-popup-con { margin : 60 rpx 10 rpx；文本对齐：中心；}.wx-popup-BTN { display : flex；证明内容：空间环绕；保证金-底部： 40 rpx}.wx-popup-BTN文本{ display : flexalign-items:居中；正义-内容：中心；宽度： 30%;height : 88 rpxborder : 2rpx固体# cccborder-radius : 88 rpx；}.BTN-科尔塞{宽度：35像素；高度：35px位置：绝对；底部：-60px；左侧：50%;左边距：-17.5像素；}.包装动画{动画：包装动画1s线性向前} @关键帧wrap animate { 0% { } 100% { background : rgba(0，0，0.7)；}}.wrapAnimateOut { animate : wrapAnimateOut 1s 0.2s线性向前} @关键帧wrapAnimateOut { 0% { background : rgba(0，0，0.7)；} 100%{background:rgba(0，0，0，0)；}}.弹出imate {动画：弹出imate 1.2s线性向前} @关键帧弹出imate { 0% { } 60% { top :47%；opa城市3360 1；} 80% {前：53%；opa城市3360 1；} 100% {前：50%；opa城市3360 1；}}.弹出{动画：弹出1.2s线性向前} @关键帧弹出{ 0% { top :50%；opa城市3360 1；} 20% {前：47%；opa城市3360 1；} 100%{}}popup.js

组件({ options : { multipleslot 3360 true//在组件定义时的选项中启用多狭槽支持}, /*组件的属性列表*/properties : { title : { type : String，value: '标题' }, //弹窗内容内容： {类型：字符串，值： '内容' }, //弹窗取消按钮文字btn_no: { type: String，value: '取消' }, //弹窗确认按钮文字btn_ok: { type: String，value: '确定' } }, /* 组件的初始数据*/data: { flag: true，bgOpacity:0，wrapAnimate:'wrapAnimate '，popupAnimate : ' popupAnimate ' }，/*组件的方法列表*/methods: { //隐藏弹框隐藏弹出窗口：函数(){ const this。setdata({ bgopathi3360 0.7，wrapanimate : ' wrapAnimateOut '，popup imate 3360 ' popup imate out ' })setTimeout(function(){ that。setdata({ flag : false })}，1200) }，/*内部私有方法建议以下划线开头事件名用于触发事件*/_error() {//触发取消回调this.triggerEvent('error') }，_success() {//触发成功回调this.triggerEvent('成功');} }})popup.json

{"组件":为真，"使用组件": {}}第三步引用组件：

index.json

{ ' USing ComPonents ' : { ' popup ' : '/ComPonents/popup/popup ' } }索引。页面结构

popup id='popup' title='弹窗组件内容='学会了吗btn_no='没有btn_ok='学会了绑定错误=' _ error '绑定成功=' _ success '/弹出索引。射流研究…

page({ ShowPopup(){ this。弹出菜单。ShowPopup()；}, //取消事件_error() { console.log('你点击了取消');this.selectComponent('#popup ').hidePopup()；}, //确认事件_success() { console.log('你点击了确定');this.selectComponent('#popup ').hidePopup()；}})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。