微信小程序自定义对话框弹出和隐藏动画
2018-07-19 10:08
966 查看
本文实例为大家分享了微信小程序自定义对话框弹出和隐藏动画的具体代码,供大家参考,具体内容如下
index.js
//index.js var app = getApp(); let animationShowHeight = 300; Page({ data:{ animationData:"", showModalStatus:false, imageHeight:0, imageWidth:0 }, imageLoad: function (e) { this.setData({imageHeight:e.detail.height,imageWidth:e.detail.width}); }, showModal: function () { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(animationShowHeight).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(animationShowHeight).step() this.setData({ animationData: animation.export(), }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export(), showModalStatus: false }) }.bind(this), 200) }, onShow:function(){ let that = this; wx.getSystemInfo({ success: function(res) { animationShowHeight = res.windowHeight; } }) }, })
index.wxml
<!--index.wxml--> <view class="container-column"> <view animation="{{animationData}}" class="container-column buydes-dialog-container" wx:if="{{showModalStatus}}"> <view class="buydes-dialog-container-top" bindtap="hideModal"></view> <view class="container-column buydes-dialog-container-bottom"> <block wx:for="{{['操作1','操作2','操作3','取消']}}" wx:for-index="index" wx:key="key" wx:for-item="item"> <view bindtap="hideModal" class="buydes-dialog-container-bottom-item" >{{item}}</view> </block> </view> </view> <image bindtap="showModal" bindload="imageLoad" style="width:{{imageWidth}}px;;height:{{imageHeight}}px;" src="../pro1.jpg"/> </view>
index.wxss
.buydes-dialog-container{ width: 100%; height: 100%; justify-content: space-between; background-color:rgba(15, 15, 26, 0.7); position: fixed; z-index: 999; } .buydes-dialog-container-top{ flex-grow: 1; } .buydes-dialog-container-bottom{ display: flex; flex-grow: 0; } .buydes-dialog-container-bottom-item{ padding:24rpx; display: flex; justify-content: center; border-bottom: 1rpx solid #eeeeee; }
效果图:
下面是实际开发中的效果图,没有源码,但是原理和上面的是一样的,通过上面的DEMO学习加上平常的CSS基础,完全可以做出下面的效果
源码下载:微信小程序自定义对话框弹出和隐藏动画
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序自定义对话框+弹出和隐藏动画详解
- [置顶] 微信小程序自定义对话框+弹出和隐藏动画详解
- 微信小程序-弹出自定义对话框
- 微信小程序 自定义浮层(弹出对话框为例)
- android 自定义Toast增加点击事件、Toast弹出隐藏动画、Toast宽度为match_parent
- 微信小程序-自定义模态对话框实例
- 微信小程序 自定义showmodal 弹出框
- 微信小程序之自定义模态弹窗(带动画)实例
- 【微信小程序】自定义模态对话框实例
- 微信小程序:自定义弹出层
- 微信小程序 自定义对话框实例详解
- 微信小程序自定义组件:对话框、指示器、五星评分...
- 微信小程序开发-自定义模态对话框实例
- 21种ANDROID自定义DIALOG_动画弹出对话框效果组件
- 微信小程序自定义底部弹出框
- 微信小程序使用modal组件弹出对话框功能示例
- 微信小程序--自定义模态对话框
- 微信小程序弹出自定义模态框,禁止底部页面滚动事件
- 微信小程序自定义组件--对话框
- 微信小程序弹出对话框