In the e-commerce project, the product details page can be added to the shopping cart or the pop-up box of product attributes can be selected when placing an order. By setting the translation animation of the view, the pop-up style from the bottom can be achieved

1.js code (in general, only the function to display the dialog box is called. When you click outside the dialog box, the dialog box can disappear)

//Click on me to display the pop-up box at the bottom
clickme:function(){
   this.showModal();
},

//display a dialog box
  showModal: function () {
    // Show mask layers
    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)
  },
  //Hide dialog
  hideModal: function () {
    // Hide mask layer
    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)
  }

2. wxss code

/*Darken the screen  */
.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*Dialog box */
.commodity_attr_box {
  height: 300rpx;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
}

3.wxml code (the showModalStatus variable should be initialized to false in the data object in js code, because the dialog box was not displayed at the beginning)

//Click on the following sentence to display the bottom pop-up box
 < view bindtap = "clickme" > Click to see the pop-up box at the bottom < / View >  

<! -- background with darkened screen background -- >
  <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
  <! -- pop up box -- >
  < view animation = "{animationdata}" class = "commodity {attr {box" Wx: if = "{showmodalstatus}"} "> write the layout in the pop-up box here < / View >

4. Set the click event, and set the click function showModal() or hideModal() for the target view