<view bindtap="clickme">點擊我可以看到底部彈框的出現(xiàn)</view>
?
<!--屏幕背景變暗的背景 ?-->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<!--彈出框 ?-->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<!--自定義彈窗內(nèi)容-->
</view>

/*使屏幕變暗 ?*/
.commodity_screen {
? width: 100%;
? height: 100%;
? position: fixed;
? top: 0;
? left: 0;
? background: #000;
? opacity: 0.2;
? overflow: hidden;
? z-index: 1000;
? color: #fff;
}
/*對話框 */
.commodity_attr_box {
? height: 50%;
? width: 100%;
? overflow: hidden;
? position: fixed;
? bottom: 0;
? left: 0;
? z-index: 2000;
? background: #fff;
? padding-top: 20rpx;
}

//點擊我顯示底部彈出框
? clickme: function () {
? ? this.showModal();
? },
?
? //顯示對話框
? 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)
? },