您的位置: 首页  >  文章  >  微信小程序自定义对话框+弹出和隐藏动画详解

微信小程序自定义对话框+弹出和隐藏动画详解

分类: 文章 • 2022-11-04 13:55:59

（转载）http://blog.****.net/pcaxb/article/details/56276180

转载请注明预见才能遇见的博客：http://my.****.net/

原文地址：http://blog.****.net/pcaxb/article/details/56276180

微信小程序自定义对话框+弹出和隐藏动画详解
index.js

[javascript] view plain copy
  1. //index.js  
  2. var app = getApp();  
  3.   
  4. let animationShowHeight = 300;  
  5.   
  6. Page({  
  7.   data:{  
  8.         animationData:"",  
  9.         showModalStatus:false,  
  10.         imageHeight:0,  
  11.         imageWidth:0  
  12.   },  
  13.   imageLoad: function (e) {    
  14.         this.setData({imageHeight:e.detail.height,imageWidth:e.detail.width});    
  15.   },  
  16.   showModal: function () {  
  17.         // 显示遮罩层  
  18.         var animation = wx.createAnimation({  
  19.             duration: 200,  
  20.             timingFunction: "linear",  
  21.             delay: 0  
  22.         })  
  23.         this.animation = animation  
  24.         animation.translateY(animationShowHeight).step()  
  25.         this.setData({  
  26.             animationData: animation.export(),  
  27.             showModalStatus: true  
  28.         })  
  29.         setTimeout(function () {  
  30.             animation.translateY(0).step()  
  31.             this.setData({  
  32.                 animationData: animation.export()  
  33.             })  
  34.         }.bind(this), 200)  
  35.     },  
  36.     hideModal: function () {  
  37.         // 隐藏遮罩层  
  38.         var animation = wx.createAnimation({  
  39.             duration: 200,  
  40.             timingFunction: "linear",  
  41.             delay: 0  
  42.         })  
  43.         this.animation = animation;  
  44.         animation.translateY(animationShowHeight).step()  
  45.         this.setData({  
  46.             animationData: animation.export(),  
  47.         })  
  48.         setTimeout(function () {  
  49.         animation.translateY(0).step()  
  50.         this.setData({  
  51.             animationData: animation.export(),  
  52.             showModalStatus: false  
  53.         })  
  54.         }.bind(this), 200)  
  55.     },  
  56.      onShow:function(){  
  57.          let that = this;  
  58.          wx.getSystemInfo({  
  59.             success: function(res) {  
  60.                 animationShowHeight = res.windowHeight;  
  61.             }  
  62.         })  
  63.      },  
  64.   
  65. })  


index.wxml
[java] view plain copy
  1. <!--index.wxml-->  
  2. <view class="container-column">  
  3.      
  4.     <view animation="{{animationData}}" class="container-column buydes-dialog-container" wx:if="{{showModalStatus}}">  
  5.         <view class="buydes-dialog-container-top" bindtap="hideModal"></view>  
  6.         <view class="container-column buydes-dialog-container-bottom">  
  7.           <block wx:for="{{['操作1','操作2','操作3','取消']}}" wx:for-index="index" wx:key="key" wx:for-item="item">  
  8.               <view bindtap="hideModal" class="buydes-dialog-container-bottom-item" >{{item}}</view>  
  9.           </block>  
  10.         </view>  
  11.     </view>  
  12.   
  13.     <image bindtap="showModal" bindload="imageLoad" style="width:{{imageWidth}}px;;height:{{imageHeight}}px;" src="../pro1.jpg"/>  
  14.   
  15. </view>  

index.wxss

[javascript] view plain copy
  1. .buydes-dialog-container{  
  2.     width: 100%;  
  3.     height: 100%;  
  4.     justify-content: space-between;  
  5.     background-color:rgba(15, 15, 26, 0.7);  
  6.     position: fixed;  
  7.     z-index: 999;  
  8. }  
  9.   
  10. .buydes-dialog-container-top{  
  11.     flex-grow: 1;  
  12. }  
  13.   
  14. .buydes-dialog-container-bottom{  
  15.     display: flex;  
  16.     flex-grow: 0;  
  17. }  
  18.   
  19. .buydes-dialog-container-bottom-item{  
  20.     padding:24rpx;  
  21.     display: flex;  
  22.     justify-content: center;  
  23.     border-bottom: 1rpx solid #eeeeee;  
  24. }  

效果图：

微信小程序自定义对话框+弹出和隐藏动画详解

下面是实际开发中的效果图，没有源码，但是原理和上面的是一样的，通过上面的DEMO学习加上平常的CSS基础，完全可以做出下面的效果

微信小程序自定义对话框+弹出和隐藏动画详解


微信小程序自定义对话框+弹出和隐藏动画详解

博客地址：http://blog.****.net/pcaxb/article/details/56276180

下载地址：http://download.****.net/detail/pcaxb/9759275


相关推荐