wxml：

<view class='buy' bindtap='showBuyModal'>立即購買</view>

<!-- 點擊立即購買 彈出購買遮罩層 -->
<view class="cover_screen" bindtap="hideBuyModal" wx:if="{{showModalStatus}}"></view>

<!-- 點擊立即購買 彈窗 -->
<view animation="{{animationData}}" class="buy_box" wx:if="{{showModalStatus}}">
    <view class='title'>{{detail.detail.title}} <text style='color:red;'>￥{{detail.price}}</text> </view>
    <view class='num'>
        <text style='padding-right:40rpx;'>購買數量：</text>
        <text class='set'>-</text>
        <text class='set'>1</text>
        <text class='set'>+</text>
    </view>
    <button type="primary" bindtap="primary" bindtap='hideBuyModal'> 確定 </button>
</view>
 

wxss:

.cover_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
.buy_box {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding: 20rpx;
  overflow: hidden;
}
.buy_box .title {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #333;
    padding: 20rpx 0;
}
.buy_box .num {
    font-size: 28rpx;
    color: #333;
    padding: 40rpx 0;
}
.buy_box .num .set {
    display: inline-block;
    height: 40rpx;
    width: 60rpx;
    text-align: center;
    line-height: 40rpx;
    border:1px solid #444;
    margin-right:2rpx;
    border-radius:8rpx;
}
 

js

// pages/detail/detail.js
Page({
    data: {
        showModalStatus: false
    },
    
    onLoad: function (options) {
        console.log(options.id)
    },

    plus () {
        let num = this.data.buyNum;
        num++;
        this.setData({
            buyNum: num
        })
    },

    delete () {
        let num = this.data.buyNum;
        if(num > 1) {
            num--;
        } 
        this.setData({
            buyNum: num
        })
    },

    showBuyModal () {
        // 顯示遮罩層
        var animation = wx.createAnimation({
            duration: 200,
            /**
              * http://cubic-bezier.com/ 
              * linear 動畫一直較為均勻
              * ease 從勻速到加速在到勻速
              * ease-in 緩慢到勻速
              * ease-in-out 從緩慢到勻速再到緩慢
              * 
              * http://www.tuicool.com/articles/neqMVr
              * step-start 動畫一開始就跳到 100% 直到動畫持續時間結束 一閃而過
              * step-end 保持 0% 的樣式直到動畫持續時間結束 一閃而過
              */
            timingFunction: "ease",
            delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
            animationData: animation.export(), // export 方法每次調用後會清掉之前的動畫操作。
            showModalStatus: true
        })
        setTimeout(() => {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export()  // export 方法每次調用後會清掉之前的動畫操作。
            })
            console.log(this)
        }, 200)
    },
    
    hideBuyModal () {
        // 隱藏遮罩層
        var animation = wx.createAnimation({
            duration: 200,
            timingFunction: "ease",
            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
            })
            console.log(this)
        }.bind(this), 200)
    },
})
 

微信小程序之 動畫 —— 自定義底部彈出層