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


Posted in Javascript onDecember 22, 2016

实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文。

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)
 }

以上所述是小编给大家介绍的JS中微信小程序自定义底部弹出框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
Bootstrap源码解读表单(2)
Dec 22 #Javascript
javascript学习之json入门
Dec 22 #Javascript
Bootstrap源码解读网格系统(3)
Dec 22 #Javascript
js微信支付实现代码
Dec 22 #Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 #Javascript
Html中 IFrame的用法及注意点
Dec 22 #Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 #Javascript
You might like
php生成验证码函数
2015/10/20 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
Javascript事件实例详解
2013/11/06 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
vue实现图书管理demo详解
2017/10/17 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python之文字转图片方法
2018/05/10 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
python3.4中清屏的处理方法
2020/07/06 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
小车司机岗位职责
2013/11/25 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
MySQL GTID复制的具体使用
2022/05/20 MySQL