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


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 相关文章推荐
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
原生js实现日期选择插件
May 21 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
理解JavaScript中的对象
Aug 25 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
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
js实现微信聊天界面
2020/08/09 Javascript
python 设置文件编码格式的实现方法
2017/12/21 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
HTTP状态码详解
2021/03/18 杂记
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
思想汇报范文
2013/11/04 职场文书
电气工程师岗位职责
2014/01/01 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
创业计划书模版
2014/02/05 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
环保项目建议书
2014/08/26 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
运动会加油稿30字
2015/07/21 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL