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 相关文章推荐
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
Vue实现跑马灯效果
May 25 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中array_merge和array相加的区别分析
2013/06/17 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP多进程简单实例小结
2019/11/09 PHP
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python 字符串定义
2009/09/25 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
编辑求职信样本
2013/12/16 职场文书
技能比赛获奖感言
2014/02/14 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
遗嘱范文
2015/08/07 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python