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


Posted in Javascript onNovember 16, 2020

本文实例为大家分享了微信小程序底部弹出框展示的具体代码,供大家参考,具体内容如下

效果图:

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

html

<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"></view>

CSS

.commodity_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.2;
 overflow: hidden;
 z-index: 1000;
 color: #fff;
}

.commodity_attr_box {
 width: 100%;
 overflow: hidden;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 2000;
 background: #fff;
 padding-top: 20rpx;
}

 JS动画样式

showModal: function () {
 // 显示遮罩层
 var animation = wx.createAnimation({
 duration: 200,
 timingFunction: "linear",
 delay: 0
 })
 this.animation = animation
 animation.translateY(300).step()
 this.setData({
 animationData: animation.export(),
 showModalStatus: true
 })
 setTimeout(function () {
 animation.translateY(0).step()
 this.setData({
 animationData: animation.export()
 })
 }.bind(this), 200)
 },
 hideModal: function () {
 // 隐藏遮罩层
 var animation = wx.createAnimation({
 duration: 200,
 timingFunction: "linear",
 delay: 0
 })
 this.animation = animation
 animation.translateY(300).step()
 this.setData({
 animationData: animation.export(),
 })
 setTimeout(function () {
 animation.translateY(0).step()
 this.setData({
 animationData: animation.export(),
 showModalStatus: false
 })
 }.bind(this), 200)
 }

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

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

Javascript 相关文章推荐
JS模拟多线程
Feb 07 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
详解vue中组件参数
Jul 09 #Javascript
微信小程序实现手指触摸画板
Jul 09 #Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 #Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 #Javascript
js中Object.defineProperty()方法的不详解
Jul 09 #Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 #Javascript
微信小程序实现倒计时补零功能
Jul 09 #Javascript
You might like
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
编写Python CGI脚本的教程
2015/06/29 Python
Python函数中不定长参数的写法
2019/02/13 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
学python安装的软件总结
2019/10/12 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
介绍一下.net和Java的特点和区别
2012/09/26 面试题
财务分析个人的自荐书范文
2013/11/24 职场文书
即兴演讲稿
2014/01/04 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
肖申克救赎观后感
2015/06/02 职场文书
繁星春水读书笔记
2015/06/30 职场文书
新党员入党决心书
2015/09/22 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android