小程序 弹出动画（分享类）
点击分享弹出一个动画 出现分享类型
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;
}