微信小程序实战之自定义模态弹窗(8)


Posted in Javascript onApril 18, 2017

先看看官方提供的模态弹窗,供大家参考,具体内容如下

微信小程序实战之自定义模态弹窗(8)

api如下:

微信小程序实战之自定义模态弹窗(8)

示例:

微信小程序实战之自定义模态弹窗(8)

这样的模态弹窗,充其量只能做个alert,提示一下信息。
但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法

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>

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;}

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 
 } 
 ); 
 } 
 } 
 
})

运行:

微信小程序实战之自定义模态弹窗(8)

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 #Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 #Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 #Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 #Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 #Javascript
微信小程序实战之自定义toast(6)
Apr 18 #Javascript
Jquery-data的三种用法
Apr 18 #jQuery
You might like
PHP中str_replace函数使用小结
2008/10/11 PHP
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
php中数组最简单的使用方法
2020/12/27 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
python操作MongoDB基础知识
2013/11/01 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python图像常规操作
2017/11/11 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python挖矿算力测试程序详解
2019/07/03 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
学生检讨书怎么写
2014/10/09 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
三好学生竞选稿
2015/11/21 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
Python入门之基础语法详解
2021/05/11 Python
mysql如何配置白名单访问
2021/06/30 MySQL
Flask response响应的具体使用
2021/07/15 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL