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


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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
json数据格式常见操作示例
Jun 13 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
javascript数组的使用
2013/03/28 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python itertools模块详解
2015/05/09 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
HTML的form表单和django的form表单
2019/07/25 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
九年级英语教学反思
2014/01/31 职场文书
超市促销活动方案
2014/03/05 职场文书
省文明单位申报材料
2014/05/08 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
2014组织生活会方案
2014/05/19 职场文书
解除施工合同协议书
2014/10/17 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
小王子读书笔记
2015/06/29 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
python xlwt模块的使用解析
2021/04/13 Python
Django 实现jwt认证的示例
2021/04/30 Python
MySQL数据库完全卸载的方法
2022/03/03 MySQL