微信小程序实战之自定义模态弹窗(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 string字符串优化问题
Jul 31 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
微信小程序实现换肤功能
Mar 14 Javascript
如何手动实现es5中的bind方法详解
Dec 07 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
php 分页原理详解
2009/08/21 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
css3的过滤效果简单实例
2016/08/03 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
活动策划邀请函
2014/02/06 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
购房委托书
2014/10/15 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
python中sys模块的介绍与实例
2021/04/17 Python