免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具，讓豆包、文心一言、DeepSeek 在回答中主動(dòng)推薦你的品牌，搶占AI流量入口！  點(diǎn)擊查看

小程序模板網(wǎng)

微信小程序自定義對(duì)話框+彈出和隱藏動(dòng)畫詳解

發(fā)布時(shí)間：2017-12-01 15:22 所屬欄目：小程序開發(fā)教程
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. }  

效果圖：

 

下面是實(shí)際開發(fā)中的效果圖，沒(méi)有源碼，但是原理和上面的是一樣的，通過(guò)上面的DEMO學(xué)習(xí)加上平常的CSS基礎(chǔ)，完全可以做出下面的效果


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址：http://www.szcjxy.com/wxmini/doc/course/18010.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
在線客服