微信小程序表单弹窗实例


Posted in Javascript onJuly 19, 2018

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

微信小程序表单弹窗实例

WXML代码如何:

<!--button--> 
<view class="btn" bindtap="powerDrawer" data-statu="open">button</view> 
 
<!--mask--> 
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view> 
<!--content--> 
<!--使用animation属性指定需要执行的动画--> 
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> 
 
 <!--drawer content--> 
 <view class="drawer_title">弹窗标题</view> 
 <view class="drawer_content"> 
  <view class="top grid"> 
   <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="top bottom grid"> 
   <label class="title col-0">备注</label> 
   <input class="input_base input_h30 col-1" name="bz"></input> 
  </view> 
 </view> 
 <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view> 
</view>

JS代码如何:

Page({ 
 data: { 
  showModalStatus: false 
 }, 
 powerDrawer: function (e) { 
  var currentStatu = e.currentTarget.dataset.statu; 
  this.util(currentStatu) 
 }, 
 util: function(currentStatu){ 
  /* 动画部分 */ 
  // 第1步:创建动画实例  
  var animation = 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 
    } 
   ); 
  } 
 } 
 
})

WXSS代码如何:

/*button*/ 
.btn { 
 width: 80%; 
 padding: 20rpx 0; 
 border-radius: 10rpx; 
 text-align: center; 
 margin: 40rpx 10%; 
 background: #000; 
 color: #fff; 
} 
 
/*mask*/ 
.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: 650rpx; 
 overflow: hidden; 
 position: fixed; 
 top: 50%; 
 left: 0; 
 z-index: 1001; 
 background: #FAFAFA; 
 margin: -150px 50rpx 0 50rpx; 
 border-radius: 3px; 
} 
 
.drawer_title{ 
 padding:15px; 
 font: 20px "microsoft yahei"; 
 text-align: center; 
} 
.drawer_content { 
 height: 210px; 
 overflow-y: scroll; /*超出父盒子高度可滚动*/ 
} 
 
.btn_ok{ 
 padding: 10px; 
 font: 20px "microsoft yahei"; 
 text-align: center; 
 border-top: 1px solid #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: 300 28rpx/30px "microsoft yahei"; 
} 
 
.input_base { 
  border: 2rpx solid #ccc; 
  padding-left: 10rpx; 
  margin-right: 50rpx; 
} 
.input_h30{ 
  height: 30px; 
  line-height: 30px; 
} 
.input_h60{ 
  height: 60px; 
} 
.input_view{ 
  font: 12px "microsoft yahei"; 
  background: #fff; 
  color:#000; 
  line-height: 30px; 
} 
 
input { 
  font: 12px "microsoft yahei"; 
  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;}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
jquery事件与绑定事件
Mar 16 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 #Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 #Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 #Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 #Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 #Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 #Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 #Javascript
You might like
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
JavaScript日历实现代码
2010/09/12 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
js实现密码强度检验
2017/01/15 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
Python实现去除代码前行号的方法
2015/03/10 Python
Python中optparser库用法实例详解
2018/01/26 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
党员党性分析材料
2014/02/17 职场文书
大学应届生的自我评价
2014/03/06 职场文书
2014年国庆标语
2014/06/30 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
windows安装python超详细图文教程
2021/05/21 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技