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


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 相关文章推荐
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
易被忽视的js事件问题总结
May 14 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 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实现LOL数据远程获取
2014/06/10 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
js字符编码函数区别分析
2008/06/05 Javascript
jquery each()源代码
2011/02/14 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python中pip的安装与使用教程
2018/08/10 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
DTD的含义以及作用
2014/01/26 面试题
学习自我鉴定
2014/02/01 职场文书
战友聚会主持词
2014/04/02 职场文书
教师考核表个人总结
2015/02/12 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis