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


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 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
详解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
中国收音机工业发展史
2021/03/02 无线电
PHP 开源AJAX框架14种
2009/08/24 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
js 判断 enter 事件
2009/02/12 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
Python控制台实现交互式环境执行
2020/06/09 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
心理学专业毕业生推荐信范文
2013/11/21 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android