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


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 相关文章推荐
javascript针对DOM的应用实例(一)
Apr 15 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
基于jquery的动态创建表格的插件
2011/04/05 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
ORACLE十问
2015/04/20 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
法律进学校实施方案
2014/03/15 职场文书
教师个人自我评价范文
2014/04/13 职场文书
留学推荐信范文
2014/05/10 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
学期个人工作总结
2015/02/13 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
MySQL Router的安装部署
2021/04/24 MySQL
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技