商品添加到购物车的弹窗前端动画

pages/show_product/show_product.js

@@ -10,7 +10,8 @@ Page({
     windowHeight: 667,
     pixelRatio: 2,
     accountType: '',
-    from_share: false
+    from_share: false,
+    addProductAnimation: {}
   },
 
   onShareAppMessage: function () {
@@ -96,6 +97,12 @@ Page({
       }
     }
 
+
+
+    this.popAddProduct()
+
+
+
     var cartItems = wx.getStorageSync('cartItems') || []
 
     var exist = cartItems.filter(function(ele){
@@ -126,5 +133,23 @@ Page({
         url: '../cart/cart'
       })
     }
+  },
+
+  popAddProduct: function () {
+    if (this.count) {
+      this.count = this.count + 1
+    } else {
+      this.count = 1
+    }
+    var animation = wx.createAnimation({
+      duration: 800,
+      timingFunction: 'ease',
+    })
+    var y = this.count % 2 === 0 ? 200 : -200
+    animation.translateY(y).step()
+
+    this.setData({
+      addProductAnimation: animation.export()
+    })
   }
 })

pages/show_product/show_product.wxml

@@ -39,4 +39,37 @@
 
 <navigator id="back-to-home" url="/pages/index/index" open-type="switchTab" hover-class="">
   <image src="../../images/back_to_home.png"></image>
-</navigator>
+</navigator>
+
+
+
+
+<view class="mall_tan_content" animation="{{addProductAnimation}}">
+  <view class="mall_tan_color">
+    <!--<image class="head-img" src="{{product['image-url']}}" mode="aspectFit" />-->
+    <view class="mall_bottom_word">
+      <view>{{product.name}}</view>
+      <view wx:if="{{ accountType === '巴爷' }}">
+        <text id="price">巴爷价：¥{{product['baye-price']}}</text>
+      </view>
+      <view wx:else>
+        <text id="price">¥{{product['member-price']}}</text>
+      </view>
+    </view>
+    <!--<image class="head-img" src="../../images/1.png" mode="aspectFit" />-->
+
+    <view wx:if="{{product['category-id'] === 18}}">
+      <view class="inventory_mold">
+        <text>商品类型</text>
+        <view>
+          <button>普通</button>
+          <button>实体卡</button>
+        </view>
+        <view></view>
+      </view>
+    </view>
+    <view class="mall_tan_num">
+      <text>购买数量：</text>
+    </view>
+  </view>
+</view>

pages/show_product/show_product.wxss

@@ -62,4 +62,9 @@
 #back-to-home image {
   width: 100rpx;
   height: 100rpx;
+}
+
+.mall_tan_content {
+  position: fixed;
+  bottom: 0;
 }