微信小程序自定義對話框彈出和隱藏動畫

2020-03-21 16:13:17

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了微信小程序自定義對話框彈出和隱藏動畫的具體代碼，供大家參考，具體內容如下

index.js

//index.jsvar 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;}

效果圖：

微信小程序,對話框