微信小程序表单弹窗实例

开发中有时候会碰到需要一个表单弹窗来处理数据的提交处理，然后这次发布的这套源码就是解决这个问题！

WXML代码如何：

！-button-view class=' BTN ' bind tap=' power抽屉数据-状态='打开'按钮/视图！-mask-view class=' drawer _ screen ' bind tap=' powerDrawer ' data-status=' close ' wx : if=' { { showModalStatus } } '/view！-内容-!-使用动画属性指定需要执行的动画-查看动画=' { { animationData } } ' class=' drawer _ box ' wx : if=' { { showModalStatus } } '！-抽屉内容-视图类='抽屉_标题'弹窗标题/view view class='抽屉_内容视图类='顶部网格label class='title col-0 '标题/label input class=' input _ base input _ h30 col-1 ' name=' rName ' value='可自行定义内容/input/view view class=' top grid ' label class=' title col-0 '标题/label input class=' input _ base input _ h30 col-1 ' name=' mobile ' value=' 110 '/input/view view class=' top grid ' label class=' title col-0 '标题/label input class=' input _ base input _ h30 col-1 ' name=' phone ' value='拒绝伸手党/input/view view class=' top grid ' label class=' title col-0 '标题/label input class=' input _ base input _ h30 col-1 ' name=' Email ' value='仅供学习使用/input /view view class='顶部底部网格label class='title col-0 '备注/label input class=' input _ base input _ h30 col-1 ' name=' BZ '/input/view/view class=' BTN _ ok ' bind tap=' power drawer ' data-status=' close '确定/view /viewJS代码如何：

页面({ data : { showmodalstatus 3360 false }，powerDrawer:函数{ var currentStatu=e .当前目标。数据集。地位；this.util(currentStatu) }，util:函数(currentStatu){ /*动画部分*///第一步：创建动画实例var动画=wx。createanimation({持续时间：200//动画时长定时功能： '线性',//线性delay: 0 //0则不延迟});//第2步：这个动画实例赋给当前的动画实例this.animation=动画；//第3步：执行第一组动画动画。不透明度(0)。rotateX(-100).step()；//第四步：导出动画对象赋给数据对象储存这个。setdata({ animationData:)动画。export()})//第5步：设置定时器到指定时候后，执行第二组动画setTimeout(函数(){ //执行第二组动画动画。不透明度(1)。rotateX(0).step()；//给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象这个。setdata({ animation data : animation })//关闭if(currentStatu==' close '){ this。setdata({ showmodalstatus 3360 false })；} }.绑定（本),200) //显示if(currentStatu==' open '){ this。setdata({ showmodalstatus 3360 true })；} } }) WXSS代码如何：

/*按钮*/。BTN {宽度：80%；padd : 20 rpx 0；边界半径： 10 rpx文本对齐：中心；保证金： 40 rpx 10%；背景技术： # 000;color: # fff}/*屏蔽*/。抽屉_屏幕{宽度： 100%;高度： 100%;位置：固定；top : 0；左： 0；z指数： 1000；背景技术： # 000;opacity: 0.5飞越：隐藏；}/*内容*/。抽屉_盒子{ width: 650rpx飞越：隐藏；位置：固定；前：名50%；左： 0；z指数： 1001；背景# FAFAFAmargin :-150 px 50 rpx 0 50 rpx；边界半径： 3px} .抽屉_标题{ padding:15pxfont: 20px '微软雅黑；文本对齐：中心；} .抽屉_内容{ height: 210px溢出-y:滚动；/*超出父盒子高度可滚动*/} .BTN _ ok { padd : 10pxfont : 20px '微软雅黑；文本对齐：中心；边框-top: 1px实心# E8E8EAcolor: # 3CC51F }。top { padding-top :8 px；} .底部{填充-底部：8 px} .标题{ height: 30px线高： 30px宽度： 160 rpx文本对齐：中心；显示器：内联块；font : 300 28 rpx/30px ' Microsoft ya hei '；} .input _ base { border : 2r px solid # CCC；左填充左： 10rpx右边距： 50 rpx} .input _ h30 { height: 30px线高： 30px} .input _ h60 { height: 60px}。input _ view { font : 12px ' Microsoft yahei '；背景# fffcolor: # 000线高： 30px}输入{ font : 12px ' Microsoft ya hei '；背景# fffcolor : # 000 } radio { margin-right : 20px；} .网格{ display :-web工具包-box；显示器：框；} .col-0 {-web kit-box-flex :0；box-flex :0；} .col-1 {-web套件-box-flex :1；box-flex :1；} .fl { float:左侧；} .fr { float:右侧；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。