小程序底部弹框

wxml:

<!-- 弹框按钮-->

<view class='circle-of-friends-panel' bindtap='showModal'>

<text>生成分享图</text>

<image src="http://eventimg.oss-cn-shenzhen.aliyuncs.com/wxapp_bg/circle_of_friends_icon.png" class="subitem-icon circle-of-friends-icon"></image>

</view>

<!-- 弹框内容-->

<view class="shared-graph" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>

<view animation="{{animationData}}" class="shared-graph-box flex-around" wx:if="{{showModalStatus}}">

<view class='share-friends '>

<button class='share-btn flex-center' open-type='share'>

<image class='share-icon' src='/images/wechat_icon.png'></image>

<text>分享微信群/好友</text>

</button>

</view>

<view class='generate-picture'>

<button class='share-btn flex-center'>

<image class='share-icon' src='/images/circle_friends_icon.png'></image>

<text>生成朋友圈分享图</text>

</button>

</view>

</view>

wxss:

/* 弹框 */

.shared-graph {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.2;

overflow: hidden;

z-index: 1000;

color: #fff;

}

.shared-graph-box {

width: 100%;

overflow: hidden;

position: fixed;

bottom: 0;

left: 0;

z-index: 2000;

background: #fff;

padding: 32rpx 0 39rpx 0;

}



.share-btn{

width:320rpx;

height:60rpx;

/* line-height: 60rpx; */

text-align: center;

border:2rpx solid rgba(253,172,42,1);

border-radius:30rpx;

font-size:24rpx;

font-weight:400;

color:rgba(0,0,0,1);

}

.share-icon{

width: 44rpx;

height: 44rpx;

padding-right: 16rpx;

}

.flex-center{

display: flex;

align-items: center;

justify-content: center;

}

js:

Page({

showModal: function () {

// 显示遮罩层

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

this.animation = animation

animation.translateY(300).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(300).step()

this.setData({

animationData: animation.export(),

})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation.export(),

showModalStatus: false

})

}.bind(this), 200)

},

})