微信小程序自定义底部弹出框动画


Posted in Javascript onNovember 18, 2020

微信小程序之自定义底部弹出框动画,供大家参考,具体内容如下

最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要的。下面做一个底部上滑的弹框。

微信小程序自定义底部弹出框动画

wxml

<view class="modals modals-bottom-dialog" hidden="{{hideModal}}">
 <view class="modals-cancel" bindtap="hideModal"></view>
 <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}"></view>
</view>

<button bindtap="showModal">点我</button>

wxss

/*模态框*/
.modals {
 position: fixed;
 z-index: 999;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}

.modals-cancel {
 position: absolute;
 z-index: 1000;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0, 0, 0, .5);
}

.bottom-dialog-body {
 position: absolute;
 z-index: 10001;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 30rpx;
 height: 800rpx;
 background-color: #fff;
}

/*动画前初始位置*/
.bottom-pos {
 -webkit-transform: translateY(100%);
 transform: translateY(100%);
}

js

Page({
 data:{
 hideModal:true, //模态框的状态 true-隐藏 false-显示
 animationData:{},//
 },

 // 显示遮罩层
 showModal: function () {
 var that=this;
 that.setData({
 hideModal:false
 })
 var animation = wx.createAnimation({
 duration: 600,//动画的持续时间 默认400ms 数值越大,动画越慢 数值越小,动画越快
 timingFunction: 'ease',//动画的效果 默认值是linear
 })
 this.animation = animation 
 setTimeout(function(){
 that.fadeIn();//调用显示动画
 },200) 
 },

 // 隐藏遮罩层
 hideModal: function () {
 var that=this; 
 var animation = wx.createAnimation({
 duration: 800,//动画的持续时间 默认400ms 数值越大,动画越慢 数值越小,动画越快
 timingFunction: 'ease',//动画的效果 默认值是linear
 })
 this.animation = animation
 that.fadeDown();//调用隐藏动画 
 setTimeout(function(){
 that.setData({
 hideModal:true
 }) 
 },720)//先执行下滑动画,再隐藏模块
 
 },

 //动画集
 fadeIn:function(){
 this.animation.translateY(0).step()
 this.setData({
 animationData: this.animation.export()//动画实例的export方法导出动画数据传递给组件的animation属性
 }) 
 },
 fadeDown:function(){
 this.animation.translateY(300).step()
 this.setData({
 animationData: this.animation.export(), 
 })
 }, 
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
js 替换
Feb 19 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
js播放wav文件(源码)
Apr 22 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue 封装面包屑组件教程
Nov 16 #Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 #Javascript
小程序实现密码输入框
Nov 16 #Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 #Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 #Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 #Javascript
Vue 数据绑定的原理分析
Nov 16 #Javascript
You might like
写出高质量的PHP程序
2012/02/04 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
自学python的建议和周期预算
2019/01/30 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
药剂专业学生求职信范文
2013/12/28 职场文书
三八节主持词
2014/03/17 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
日语专业求职信
2014/07/04 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
联村联户简报
2015/07/21 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
python创建字典及相关管理操作
2022/04/13 Python