emmmmmmm,這是我的第一個發的部落格。希望對大家有點幫助。

這是用的小程式自帶的動畫事件來是我們的彈出框顯示和

var animation;
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    animationData: {}
  },

  tanchu:function(){
    animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.translate(0,-153).step();
    this.setData({
      animationData: animation.export()
    })  
  },
  hideModal:function(){
    animation.translate(0, 0).step();
    this.setData({
      animationData: animation.export()
    })
  },
})
 

這部分是頁面的，也沒什麼好說的了。

<!--a/a.wxml-->
<button bindtap='tanchu'>點選</button>
<view class='kuai' animation="{{animationData}}">
  <view class='les'>操作1</view>
  <view class='les'>操作2</view>
  <view class='les' bindtap='hideModal'>取消</view>
</view>

這是css其實沒什麼要寫的。只要根據自己需求寫樣式，一開始先使用偏移將選單欄移除試圖區域。

.kuai{
  width: 100%;
  height: 300rpx;
  background-color: #888888;
  margin-bottom: -153px;
  position: fixed;
  bottom: 0;
}
.les{
  color: white;
  text-align: center;
  height: 100rpx;
  width: 100%;
  line-height: 100rpx;
  border-bottom:1rpx solid black; 
}

樣式醜是醜了點，畢竟只是練下手QAQ。

支援一下嘻嘻