微信小程序自定义对话框弹出和隐藏动画


Posted in Javascript onJuly 19, 2018

本文实例为大家分享了微信小程序自定义对话框弹出和隐藏动画的具体代码,供大家参考,具体内容如下

index.js

//index.js
var app = getApp();
 
let animationShowHeight = 300;
 
Page({
 data:{
 animationData:"",
 showModalStatus:false,
 imageHeight:0,
 imageWidth:0
 },
 imageLoad: function (e) { 
 this.setData({imageHeight:e.detail.height,imageWidth:e.detail.width}); 
 },
 showModal: function () {
 // 显示遮罩层
 var animation = wx.createAnimation({
  duration: 200,
  timingFunction: "linear",
  delay: 0
 })
 this.animation = animation
 animation.translateY(animationShowHeight).step()
 this.setData({
  animationData: animation.export(),
  showModalStatus: true
 })
 setTimeout(function () {
  animation.translateY(0).step()
  this.setData({
  animationData: animation.export()
  })
 }.bind(this), 200)
 },
 hideModal: function () {
 // 隐藏遮罩层
 var animation = wx.createAnimation({
  duration: 200,
  timingFunction: "linear",
  delay: 0
 })
 this.animation = animation;
 animation.translateY(animationShowHeight).step()
 this.setData({
  animationData: animation.export(),
 })
 setTimeout(function () {
 animation.translateY(0).step()
 this.setData({
  animationData: animation.export(),
  showModalStatus: false
 })
 }.bind(this), 200)
 },
 onShow:function(){
  let that = this;
  wx.getSystemInfo({
  success: function(res) {
  animationShowHeight = res.windowHeight;
  }
 })
 },
 
})

index.wxml

<!--index.wxml-->
<view class="container-column">
 
 <view animation="{{animationData}}" class="container-column buydes-dialog-container" wx:if="{{showModalStatus}}">
 <view class="buydes-dialog-container-top" bindtap="hideModal"></view>
 <view class="container-column buydes-dialog-container-bottom">
  <block wx:for="{{['操作1','操作2','操作3','取消']}}" wx:for-index="index" wx:key="key" wx:for-item="item">
  <view bindtap="hideModal" class="buydes-dialog-container-bottom-item" >{{item}}</view>
  </block>
 </view>
 </view>
 
 <image bindtap="showModal" bindload="imageLoad" style="width:{{imageWidth}}px;;height:{{imageHeight}}px;" src="../pro1.jpg"/>
 
</view>

index.wxss

.buydes-dialog-container{
 width: 100%;
 height: 100%;
 justify-content: space-between;
 background-color:rgba(15, 15, 26, 0.7);
 position: fixed;
 z-index: 999;
}
 
.buydes-dialog-container-top{
 flex-grow: 1;
}
 
.buydes-dialog-container-bottom{
 display: flex;
 flex-grow: 0;
}
 
.buydes-dialog-container-bottom-item{
 padding:24rpx;
 display: flex;
 justify-content: center;
 border-bottom: 1rpx solid #eeeeee;
}

效果图:

微信小程序自定义对话框弹出和隐藏动画

下面是实际开发中的效果图,没有源码,但是原理和上面的是一样的,通过上面的DEMO学习加上平常的CSS基础,完全可以做出下面的效果

微信小程序自定义对话框弹出和隐藏动画

源码下载:微信小程序自定义对话框弹出和隐藏动画

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery与其它库冲突的解决方法
Jun 25 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
使用js显示当前时间示例
Mar 02 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 #Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 #Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 #Javascript
微信小程序实现分享到朋友圈功能
Jul 19 #Javascript
微信小程序实现自定义加载图标功能
Jul 19 #Javascript
Angular5集成eventbus的示例代码
Jul 19 #Javascript
微信小程序实现弹出菜单
Jul 19 #Javascript
You might like
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
基于php 随机数的深入理解
2013/06/05 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
社区活动总结报告
2014/05/05 职场文书
环保口号大全
2014/06/12 职场文书
计划生育标语
2014/06/23 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python