微信小程序表单弹窗实例


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 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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
Wordpress php 分页代码
2009/10/21 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
jquery 常用操作方法
2010/01/28 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
python直接访问私有属性的简单方法
2016/07/25 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python日志syslog使用原理详解
2020/02/18 Python
如何使用repr调试python程序
2020/02/28 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
应届生求职信写作技巧
2013/10/24 职场文书
社区服务活动总结
2014/05/07 职场文书
火灾现场处置方案
2014/05/28 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
英语课外活动总结
2014/08/27 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
vue elementUI批量上传文件
2022/04/26 Vue.js