微信小程序之自定义模态弹窗（带动画）实例

代码地址如下：
http://www.demodashi.com/demo/13991.html

一、前期准备工作

软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

实现用户自定义弹框
带动画（动画可做参靠，个人要是觉得不好看可以自定义动画）
获取弹出框的内容，自定义事件获取

2、案例目录结构

二、程序实现具体步骤

1.弹框index.wxml代码

<!--button-->
<view class="btn" bindtap="powerDrawer" data-statu="open">来点我呀</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>

2.弹框index.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;}

3.弹框index.js逻辑代码

a.动画部分的功能实现

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

三、案例运行效果图

四、总结与备注

暂无微信小程序之自定义模态弹窗（带动画）实例

代码地址如下：
http://www.demodashi.com/demo/13991.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

微信小程序之自定义模态弹窗（带动画）实例相关推荐

微信小程序之自定义toast弹窗
微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的 ...
微信小程序：如何制作一个带动画效果的按钮
App制作者希望有一些按钮,引导用户去操作,那么带动画会起到一定的引流作用吧! 本主编就在此分享一款.效果如下,如果是你需要的,请继续往下看代码.不是需要的朋友就不用看了. WXML <view ...
【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...
微信小程序手把手教你实现带字母索引的城市选择列表
微信小程序手把手教你实现带字母索引的城市选择列表前言需求分析左边可滑动列表滑动列表UI实现 item点击事件右边带字母的索引条索引条从上到下分别是定位和26个大写字母索引条响应触摸和点击 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors

微信小程序之自定义模态弹窗（带动画）实例

一、前期准备工作

1、基本需求。

2、案例目录结构

二、程序实现具体步骤

1.弹框index.wxml代码

2.弹框index.wxss代码

3.弹框index.js逻辑代码

三、案例运行效果图

四、总结与备注

微信小程序之自定义模态弹窗（带动画）实例相关推荐

最新文章

热门文章