微信小程序表单弹窗实例
开发中有时候会碰到需要一个表单弹窗来处理数据的提交处理,然后这次发布的这套源码就是解决这个问题!
<!--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>
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
}
);
}
} })
/*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:;
left:;
z-index:;
background: #000;
opacity: 0.5;
overflow: hidden;
} /*content*/
.drawer_box {
width: 650rpx;
overflow: hidden;
position: fixed;
top: 50%;
left:;
z-index:;
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:;box-flex:;}
.col-1 {-webkit-box-flex:;box-flex:;}
.fl { float: left;}
.fr { float: right;}
微信小程序表单弹窗实例的更多相关文章
- 微信小程序表单校验WxValidate.js使用
WxValidate插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码.电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单. 首先 ...
- 微信小程序表单验证(WxValidate使用)
参考博客: https://www.cnblogs.com/zhangxiaoyong/p/10166951.html https://github.com/wux-weapp/wx-extend/b ...
- 微信小程序表单验证
参考:http://www.cnblogs.com/zhangxiaoyong/p/10166951.html
- 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作
爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法
最近在学习微信小程序时遇到了个问题:官方的背景音乐的api实例代码中的音乐src不管用(可能有期限,后面的方法获取的src同样可能有期限),因此本人只能自己去寻找办法获取src,现将方法记录在下面.( ...
- “我要点爆”微信小程序云开发实例
使用云开发进行微信小程序“我要点爆”的制作 下一章:“我要点爆”微信小程序云开发之项目建立与我的页面功能实现 接下来我将对“我要点爆”微信小程序进行完整的开源介绍 小程序名称: 我要点爆 查看方式:从 ...
- 微信小程序request请求实例,网络请求。
最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api. 官方参 ...
- 微信小程序底部弹窗动画
第一步,在组件里编写弹窗的代码 <!-- 活动类型弹框 --> <view class='bottomModel' wx:if="{{modelFlag}}" c ...
随机推荐
- windows10 -- mysql5.5 + python3.4 + django1.11 +pycharm2016.2 + PyMySQL(DB DRIVER) 环境搭建
环境介绍 2016-07-2513:32:26 name value comment OS win10 操作系统 python python3.4 python主程序 IDE pycharm: 20 ...
- opencv:自定义滤波
卷积核的定义 均值卷积核 // 自定义滤波 - 均值卷积 int k = 15; Mat mkernel = Mat::ones(k, k, CV_32F) / (float)(k * k); Mat ...
- Java进阶学习(1)之类与对象(下)
类与对象 函数与调用 函数是通过对象来调用的 this 是成员函数的特殊的固有的本地变量 它表达了调用这个函数的那个对象 调用函数 通过 . 运算符,调用某个对象的函数 在成员函数内部直接调用自己(t ...
- 2020年一线大厂月薪35K的Python开发要求
为什么程序员要在2020年学习Python? 如果你正在考虑学习 Python,但又不确定为什么要这样做的话,那么你可以看看以下的内容: 马蜂窝裁员竟然达到了40%, 前段时间猪厂.菊厂裁员被推到了风 ...
- Ubuntu python3 与 python2 的 pip调用
ubuntu 是默认装有pytthon2.x 与 python3.x 共存的 通常终端里 python 表示 python2 版本 python3 表示 python3 版本 (如果你没更改软链接设置 ...
- Kafka .net 开发入门
Kafka安装 首先我们需要在windows服务器上安装kafka以及zookeeper,有关zookeeper的介绍将会在后续进行讲解. 在网上可以找到相应的安装方式,我采用的是腾讯云服务器,借鉴的 ...
- 吴裕雄--天生自然TensorFlow2教程:链式法则
import tensorflow as tf x = tf.constant(1.) w1 = tf.constant(2.) b1 = tf.constant(1.) w2 = tf.consta ...
- linux--网络管理-ifconfig,route,netstat,ip,ss,dns,主机名网卡名修改bond
cat /etc/services 查看常见端口对应的服务 查一查某个端口号,是哪个进程在用 lsof -i :6010 49152-65535:动态端口或私有端口,客户端程序随机使用的端口 其 ...
- Java 去除字符串前后指定的字符
一.去除字符串中的中文字符. /** * 去除字符串中的中文字符 * * 示例:brandName值为: 中国ABCD88深圳 * * 返回: ABCD88 * * @param brandName ...
- 为什么ISR4K、ASR1K等设备的QoS ACL没有显示计数?
思科的ISR4K和ASR1K设备都是IOS XE的架构,它们和传统的IOS架构是不一样的. 以ISR4K为例,和一般的IOS(例如ISR G2)有所区别,他的转发更依赖硬件完成,针对NAT或QoS应用 ...