微信小程序实战之自定义模态弹窗(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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
再谈javascript原型继承
Nov 10 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 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
推荐25款php中非常有用的类库
2014/09/29 PHP
提高php编程效率技巧
2015/08/13 PHP
php实现网站留言板功能
2015/11/04 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
python查找第k小元素代码分享
2013/12/18 Python
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python实现配置文件备份的方法
2015/07/30 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
财务经理的岗位职责
2013/12/17 职场文书
青年文明号汇报材料
2014/12/23 职场文书
python中pycryto实现数据加密
2022/04/29 Python