要點一：固定底部（position:fixed）

1. page {
2. position: relative;
3. height: 100%;
4. }
5.  
6. /*彈窗主體*/
7. .modal-content {
8. position: fixed;
9. bottom: -285px;
10. left: 0;
11. width: 100%;
12. height: 285px;
13. margin-top: 5px;
14. background: #fff;
15. z-index: 999;
16. }

要點二、位移動畫translateY

1. var animation = wx.createAnimation({
2. duration: 500,
3. timingFunction: 'ease-in-out',
4. });
5. this.animation = animation;
6. animation.translateY(-285).step();
7. this.setData({
8. animationData: this.animation.export(),
9. maskVisual: 'show'
10. });
11.  
12. <view animation="{{animationData}}" class="modal-content">

position文檔出處

附上完整代碼：

js代碼

1. cascadePopup: function() {
2. var animation = wx.createAnimation({
3. duration: 500,
4. timingFunction: 'ease-in-out',
5. });
6. this.animation = animation;
7. animation.translateY(-285).step();
8. this.setData({
9. animationData: this.animation.export(),
10. maskVisual: 'show'