小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

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

发布时间：2017-12-01 15:22 所属栏目：小程序开发教程
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基础，完全可以做出下面的效果


易优小程序（企业版）+灵活api+前后代码开源 码云仓库:starfork
本文地址：https://www.eyoucms.com/wxmini/doc/course/18010.html 复制链接 如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

产品

服务

帮助

关于

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

联系我们
QQ在线咨询