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


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 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
关于JavaScript轮播图的实现
Nov 20 Javascript
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
session 的生命周期是多长
2006/10/09 PHP
其他功能
2006/10/09 PHP
扩展你的 PHP 之入门篇
2006/12/04 PHP
PHP与SQL注入攻击[三]
2007/04/17 PHP
php 函数中使用static的说明
2012/06/01 PHP
php把session写入数据库示例
2014/02/26 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
比较完整的微信开发php代码
2016/08/02 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
Python编程argparse入门浅析
2018/02/07 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Django之PopUp的具体实现方法
2019/08/31 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
假期安全教育广播稿
2014/10/04 职场文书
初婚初育证明范本
2014/11/24 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
养成教育主题班会
2015/08/13 职场文书
《绝招》教学反思
2016/02/20 职场文书