小程序自定义弹框效果

2023-07-11 17:28:03 327

/*button*/ .btn{ width:80%; padding:20rpx0; border-radius:10rpx; text-align:center; margin:40rpx10%; background:#000; color:#fff; } /*mask*/ .drawer_screen{ width:100%; height:100%; position:fixed; top:0; left:0; z-index:1000; background:#000; opacity:0.75; overflow:hidden; } /*content*/ .drawer_box{ width:650rpx; overflow:hidden; position:fixed; top:50%; left:0; z-index:1001; background:#FAFAFA; margin:-150px50rpx050rpx; border-radius:3px; } .drawer_title{ padding:15px; font:20px"microsoftyahei"; text-align:center; } .drawer_content{ height:210px; overflow-y:scroll;/*超出父盒子高度可滚动*/ } .btn_ok{ padding:10px; font:20px"microsoftyahei"; text-align:center; border-top:1pxsolid#E8E8EA; color:#3CC51F; } .top{ padding-top:8px; } .bottom{ padding-bottom:8px; } .title{ height:30px; line-height:30px; width:160rpx; text-align:center; display:inline-block; font:30028rpx/30px"microsoftyahei"; } .input_base{ border:2rpxsolid#ccc; padding-left:10rpx; margin-right:50rpx; } .input_h30{ height:30px; line-height:30px; } .input_h60{ height:60px; } .input_view{ font:12px"microsoftyahei"; background:#fff; color:#000; line-height:30px; } input{ font:12px"microsoftyahei"; background:#fff; color:#000; } radio{ margin-right:20px; } .grid{display:-webkit-box;display:box;} .col-0{-webkit-box-flex:0;box-flex:0;} .col-1{-webkit-box-flex:1;box-flex:1;} .fl{float:left;} .fr{float:right;}

Page({ data:{ showModalStatus:false }, powerDrawer:function(e){ varcurrentStatu=e.currentTarget.dataset.statu; this.util(currentStatu) }, util:function(currentStatu){ /*动画部分*/ //第1步：创建动画实例 varanimation=wx.createAnimation({ duration:200,//动画时长 timingFunction:"linear",//线性 delay:0//0则不延迟 }); //第2步：这个动画实例赋给当前的动画实例 this.animation=animation; //第3步：执行第一组动画 animation.opacity(0).rotateX(-100).step(); //第4步：导出动画对象赋给数据对象储存 this.setData({ animationData:animation.export() }) //第5步：设置定时器到指定时候后，执行第二组动画 setTimeout(function(){ //执行第二组动画 animation.opacity(1).rotateX(0).step(); //给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象 this.setData({ animationData:animation }) //关闭 if(currentStatu=="close"){ this.setData( { showModalStatus:false } ); } }.bind(this),200) //显示 if(currentStatu=="open"){ this.setData( { showModalStatus:true } ); } } })

小程序自定义弹框效果

热门推荐

随机推荐