微信小程序实战之自定义模态弹窗(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 相关文章推荐
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
javascript实现简易聊天室
Jul 12 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 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生成excel文件的简单方法
2014/02/08 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
Python 远程开关机的方法
2020/11/18 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
高一学生评语大全
2014/04/25 职场文书
2014年教师工作总结
2014/11/10 职场文书
监理中标通知书
2015/04/16 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
springboot临时文件存储目录配置方式
2021/07/01 Java/Android