小程式 彈出動畫(分享類)
阿新 • • 發佈:2019-02-12
點選分享彈出一個動畫 出現分享型別
wxml:
<view> <view animation="{{animationData}}" class="buydes-dialog-container" wx:if="{{showModalStatus}}"> <view class="buydes-dialog-container-top" bindtap="hideModal"> </view> <view class="buydes-dialog-container-bottom"> <view class="fl bottom-image-fen"> <button open-type="share" hover-class="other-button-hover" class="button-bg"> <image src="../../img/weixin.png" style="width: 80rpx; height: 80rpx;" class="bottom-img"></image> <view class="image-txt">傳送好友</view> </button> </view> <view class="fl bottom-image-fen"> <view style="margin-top: 5rpx;" bindtap="saveShareImg"> <image src="../../img/down.png" style="width: 60rpx; height: 60rpx;" class="bottom-img-right "></image> <view class="image-txt">儲存卡片</view> </view> </view> <view class="clear"></view> <view bindtap="hideModal" class="buydes-dialog-container-bottom-item" >取消</view> </view> </view> <image bindtap="showModal" bindload="imageLoad" style="width:200px;" src="../../img/xingli.png"/> </view>
js:
let animationShowHeight = 300; Page({ data:{ animationData:"", showModalStatus:false, }, // 顯示遮罩層 showModal: function () { let that = this; let animation = wx.createAnimation({ duration: 200, timingFunction: "linear", }); that.animation = animation; animation.translateY(animationShowHeight).step(); that.setData({ animationData: animation.export(), showModalStatus: true }); setTimeout(function () { animation.translateY(0).step(); that.setData({ animationData: animation.export() }) }.bind(that), 200); that.setData({ shareImgHidden: true, }); }, // 隱藏遮罩層 hideModal: function () { let that = this; let animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }); that.animation = animation; animation.translateY(animationShowHeight).step(); that.setData({ animationData: animation.export(), }); setTimeout(function () { animation.translateY(0).step(); that.setData({ animationData: animation.export(), showModalStatus: false }) }.bind(that), 200); }, onShow:function(){ let that = this; wx.getSystemInfo({ success: function(res) { animationShowHeight = res.windowHeight; } }); }, });
wxss:
.buydes-dialog-container{ width: 100%; height: 100%; background-color:rgba(15, 15, 26, 0.3); position: fixed; z-index: 999; } .buydes-dialog-container-top { height: 80vh; } .buydes-dialog-container-bottom { background-color: #ffffff; } .buydes-dialog-container-bottom-item{ background-color: #eeeeee; padding:24rpx; text-align: center; border-bottom: 1rpx solid #eeeeee; } .bottom-img { border: 0; margin-bottom: -20rpx; } button::after { border: 0; } .button-bg { background-color: #ffffff; height: 160rpx; padding-top: 20rpx; } .bottom-image-fen { width: 50vw; } .image-txt { line-height: 30rpx; text-align: center; font-size: 24rpx;} .bottom-img-right { background-color: #3EBDFE; border-radius: 50rpx; padding: 10rpx; margin-top: 20rpx; margin-left: 20vw; margin-bottom: 5rpx; }