微信小程序表单弹窗实例


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 相关文章推荐
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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
Yii2框架redis基本应用示例
2018/07/13 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
python实现外卖信息管理系统
2018/01/11 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
信息管理专业推荐信
2013/10/29 职场文书
商场端午节活动方案
2014/01/29 职场文书
期末自我鉴定
2014/02/02 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
董事会决议范本
2015/07/01 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python