微信小程序自定义底部弹出框
2018-07-09 16:15
871 查看
本文实例为大家分享了微信小程序底部弹出框展示的具体代码,供大家参考,具体内容如下
效果图:
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中微信小程序自定义底部弹出框
- 微信小程序弹出自定义模态框,禁止底部页面滚动事件
- 微信小程序商品详情页的底部弹出框
- 微信小程序自定义对话框弹出和隐藏动画
- 微信小程序自定义弹窗showModel模态框、Toast提示框、actionSheet底部动画弹窗(多API调用)
- [置顶] 微信小程序自定义对话框+弹出和隐藏动画详解
- 微信小程序:自定义弹出层
- 微信小程序商品详情页的底部弹出框效果
- 微信小程序例子——使用action-sheet弹出小程序底部菜单
- 微信小程序-弹出自定义对话框
- 微信小程序自定义对话框+弹出和隐藏动画详解
- 微信小程序 自定义showmodal 弹出框
- 微信小程序 自定义浮层(弹出对话框为例)
- 微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
- android自定义popupwindow仿微信右上角弹出菜单效果
- Android自定义dialog从屏幕底部弹出并且充满屏幕宽度
- 微信小程序自定义组件实现tabs选项卡功能
- 微信小程序实现自定义加载图标功能
- 安卓开发:自定义PopupWindow,实现模仿iOS底部弹出菜单