details

pages/details/details.js

@@ -15,7 +15,8 @@ Page({
     vertical: false,
     autoplay: true,
     interval: 2000,
-    duration: 500
+    duration: 500,
+    animation_flag: false
   },
 
   /**
@@ -58,6 +59,13 @@ Page({
       url: `/pages/webView/webView?url=${webViewUrl}`
     })
   },
+  animation_flag(e) {
+    let flag = e.currentTarget.dataset.flag
+    let animation_flag = flag == 'true' ? true : false
+    this.setData({
+      animation_flag
+    })
+  },
 
   /**
    * 生命周期函数--监听页面初次渲染完成

pages/details/details.wxml

@@ -99,11 +99,20 @@
 
   <view class="place-bac247"></view>
   <button style="width: 60%;" type="primary" plain="true" bindtap="toWebView">查看更多详情</button>
-
-  <!-- <view class="details_tabbar">
-    <navigator class="details_tabbar_item" url="/pages/comments/comments">
-      
+   <view class="details_tabbar">
+    <navigator class="details_tabbar_item" url="/pages/index/index" open-type="switchTab">
+      <image class="details_tabbar_icon" src="../../image/home-icon.png"></image>
+      <view class="details_tabbar_label">首页</view> 
+    </navigator>
+    <navigator class="details_tabbar_item" url="/pages/shopCart/shopCart" open-type="switchTab">
+      <image class="details_tabbar_icon" src="../../image/shopcart-icon.png"></image>
+      <view class="details_tabbar_label">购物车</view> 
     </navigator>
-  </view> -->
+    <view class="details_tabbar_simple">加入购物车</view>
+    <view class="details_tabbar_simple buy" bindtap='animation_flag' data-flag="true">立即购买</view>
+  </view> 
+
+  <view class="animation_popup {{animation_flag ? 'show_popup' : ''}}" bindtap='animation_flag' data-flag="false"></view>
+  <view class="test_animation {{animation_flag ? 'show_animation' : ''}}">test</view>
 
 </view>

pages/details/details.wxss

@@ -22,14 +22,14 @@
   max-width: 220rpx;
   font-size: 24rpx;
   height: 40rpx;
-  line-height:40rpx;
+  line-height: 40rpx;
   display: inline-block;
   vertical-align: middle;
 }
 
 .nickname {
   height: 40rpx;
-  line-height:40rpx;
+  line-height: 40rpx;
   font-size: 24rpx;
   display: inline-block;
   vertical-align: middle;
@@ -104,7 +104,7 @@
   font-size: 24rpx;
 }
 
- .congratulation_text::after {
+.congratulation_text::after {
   content: " ";
   position: absolute;
   left: 0;
@@ -117,7 +117,7 @@
   transform-origin: 0 100%;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
-} 
+}
 
 .details_stamps {
   /* height: 166rpx; */
@@ -256,3 +256,81 @@
   bottom: 0;
   background: #fff;
 }
+
+.details_tabbar_item {
+  display: block;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+  font-size: 0;
+  color: #999;
+  text-align: center;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  padding: 8rpx 0 0;
+}
+
+.details_tabbar_icon {
+  display: block;
+  margin: auto;
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.details_tabbar_label {
+  text-align: center;
+  line-height: 1.8;
+  font-size: 20rpx;
+  color: #000;
+}
+
+.details_tabbar_simple {
+  text-align: center;
+  background: rgb(0, 0, 0);
+  flex: 2 1 0%;
+  padding: 0;
+  height: 100rpx;
+  line-height: 100rpx;
+  font-size: 30rpx;
+  color: #fff;
+}
+
+.details_tabbar_simple.buy {
+  background: rgb(255, 78, 78);
+}
+
+.test_animation {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 502;
+  height: 300rpx;
+  font-size: 34rpx;
+  text-align: center;
+  background: skyblue;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+   -webkit-transform: translateY(100%);
+  transform: translateY(100%); 
+}
+
+.show_animation {
+  -webkit-transform: translateY(0);
+  transform: translateY(0);
+}
+.animation_popup {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  /* -webkit-transition: opacity 400ms;
+  transition: opacity 400ms; */
+}
+.animation_popup.show_popup {
+  z-index: 501;
+  opacity: 1;
+}