微信小程序——加入購物車彈層

對於網上商城，加入購物車是一個必備功能了。俺今天就來說下在微信小程序里如何造一個購物車彈層。

先上圖：

 

主要用到的微信API:wx.createAnimation(OBJECT)

 

說下思路：

1.wxml文件里將頁面布局好，我的布局如下圖：

大概的框架代碼如下：

<view class='mask-layer' wx:if="{{showPop}}" bindtap='hideModal'></view>
<view class='pop-add-cart pop-common' wx:if="{{showPop}}" animation='{{animationData}}'>
  <view class='header row'>
    頭部區域
  </view>
  <scroll-view class='body' scroll-y='true'>
    中間區域
  </scroll-view>
  <view class='footer toolbar'>
    底部區域
  </view>
</view>

 

2.wxss里面寫樣式，主要的樣式代碼如下：

.mask-layer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
.pop-common {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
}

 

3.寫動畫所需的js：

//獲取應用實例
var app = getApp();

Page({

  /**
   * 頁面的初始數據
   */
  data: {  
    showPop: false,
    animationData: {},   
  },

  // 顯示底部彈層
  showModal: function() {
    var _this = this;
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
      delay: 0
    })
    _this.animation = animation
    animation.translateY(300).step()
    _this.setData({
      animationData: animation.export(),
      showPop: true
    })
    setTimeout(function() {
      animation.translateY(0).step()
      _this.setData({
        animationData: animation.export()
      })
    }.bind(_this), 50)
  },
  // 隱藏底部彈層
  hideModal: function() {
    var _this = this;
    // 隱藏遮罩層
    var animation = wx.createAnimation({
      duration: 500,
      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(),
        showPop: false
      })
    }.bind(this), 200)
  },
})

 

三步搞定！！上述代碼配着小程序的官方文檔來看，要理解它，難度應該不大。自己動手試試吧~~