微信小程序实战之自定义模态弹窗(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代码[翻译]
Feb 12 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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中的boolean(布尔)类型详解
2013/10/28 PHP
10个简化PHP开发的工具
2014/12/25 PHP
php格式化电话号码的方法
2015/04/24 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
vue中导出Excel表格的实现代码
2018/10/18 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
python定时器使用示例分享
2014/02/16 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
应届生会计求职信
2013/11/11 职场文书
十八大感想感言
2014/02/10 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
听课评语大全
2014/04/30 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
辩论赛新闻稿
2015/07/17 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL