加入动画

pages/addAddress/addAddress.js

@@ -25,7 +25,8 @@ Page({
     city_id: '',
     bindName: '',
     bindPhone: '',
-    bindAddress: ''
+    bindAddress: '',
+    show: true
   },
 
   /**
@@ -71,9 +72,9 @@ Page({
     })
   },
   getDatas() {
-    wx.showLoading({
-      title: '加载中',
-    })
+    // wx.showLoading({
+    //   title: '加载中',
+    // })
     var self = this
     getReq({
       act: 'app_update',
@@ -90,12 +91,13 @@ Page({
           tree = self.arrayToTree(res.datas.areas)
           appInstance.setArrayTree(tree)
         }
-        wx.hideLoading()
+        // wx.hideLoading()
         self.setData({
           areas: res.datas.areas,
           tree,
           citys: tree[0].children,
-          districts: tree[0].children[0].children
+          districts: tree[0].children[0].children,
+          show: false
         })
         
       }

pages/addAddress/addAddress.wxml

@@ -1,4 +1,6 @@
 <!--pages/addAddress/addAddress.wxml-->
+<import src="../components/template/loadAnimation/loadAnimation.wxml" />
+<template is="addressLoad" wx:if="{{show}}"/>
 <view>
 
   <view class="info_cell-wrap bacfff">

pages/addAddress/addAddress.wxss

@@ -1,6 +1,6 @@
 /* pages/addAddress/addAddress.wxss */
 @import "../address/address.wxss";
-
+@import "../components/template/loadAnimation/loadAnimation.wxss";
 .info_cell-wrap {
   padding-left: 40rpx;
 }

pages/components/template/loadAnimation/loadAnimation.wxml

@@ -12,4 +12,46 @@
       <view class="large-line  t50 bacf7f8fa"></view>
     </view>
   </view>
+</template>
+
+
+<template name="addressLoad">
+  <view class="load-container" style="padding: 0 30rpx;">
+    <view class="animation_line full-line t36"></view>
+    <view class="animation_line full-line t36"></view>
+    <view class="animation_line full-line t36"></view>
+    <view class="animation_line full-line t36"></view>
+
+
+  </view>
+</template>
+
+<template name="shopcartLoad">
+  <view class="load-container">
+    <view class="animation_shopcart t20">
+      <view class="left_shopcart animation_line"></view>
+      <view class="right_shopcart">
+        <view class="animation_line short-line"></view>
+        <view class="animation_line short-line t36"></view>
+        <view class="animation_line short-line t36"></view>
+      </view>
+    </view>
+    <view class="animation_shopcart t20">
+      <view class="left_shopcart animation_line"></view>
+      <view class="right_shopcart">
+        <view class="animation_line short-line"></view>
+        <view class="animation_line short-line t36"></view>
+        <view class="animation_line short-line t36"></view>
+      </view>
+    </view>
+    <view class="animation_shopcart t20">
+      <view class="left_shopcart animation_line"></view>
+      <view class="right_shopcart">
+        <view class="animation_line short-line"></view>
+        <view class="animation_line short-line t36"></view>
+        <view class="animation_line short-line t36"></view>
+      </view>
+    </view>
+
+  </view>
 </template>

pages/components/template/loadAnimation/loadAnimation.wxss

@@ -1,4 +1,7 @@
 /* components/template/loadAnimation/loadAnimation.wxss */
+.t20 {
+  margin-top: 20rpx;
+}
 .t36 {
   margin-top: 36rpx;
 }
@@ -40,4 +43,39 @@
 }
 .large-line {
   height: 120rpx;
-}
+}
+
+.animation_line {
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeHolderShimmer;
+  animation-timing-function: linear;
+  background: #f7f7f7;
+  background: -webkit-gradient(linear, left top, right top, color-stop(8%, #f7f7f7), color-stop(18%, #DEE3E5), color-stop(33%, #f7f7f7));
+  background: linear-gradient(to right, #f7f7f7 8%, #DEE3E5 18%, #f7f7f7 33%);
+  background-size: 900px 4px;
+  position: relative;
+  overflow: hidden;
+}
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+.animation_shopcart {
+  display: flex;
+  height: 160rpx;
+  padding: 20rpx 30rpx;
+}
+.left_shopcart {
+  width: 160rpx;
+  height: 160rpx;
+  margin-right: 30rpx;
+}
+.right_shopcart {
+  flex: 1;
+}

pages/shopCart/shopCart.js

@@ -2,6 +2,7 @@ const getReq = require('./../../config.js').getReq;
 import Bundle from '../../utils/Bundle'
 Page({
   data: {
+    loadAnimation: true,
     free_info: [],
     summary: [],
     cart_list: [],
@@ -20,6 +21,7 @@ Page({
   },
   onShow: function () {
     this.setData({
+      loadAnimation: true,
       free_info: [],
       summary: [],
       cart_list: [],
@@ -118,9 +120,6 @@ Page({
 
   req_datas() {
     let self = this;
-    wx.showLoading({
-      title: '加载中',
-    });
     getReq({
       act: 'cart',
       op: 'list',
@@ -140,9 +139,9 @@ Page({
         let summary = [];
         if (cart_list.length <= 0) {
           self.setData({
-            free_info: free_info || self.data.free_info
+            free_info: free_info || self.data.free_info,
+            loadAnimation: false
           });
-          wx.hideLoading();
           return;
         }
         for (let item of cart_list) {
@@ -174,9 +173,10 @@ Page({
         self.setData({
           free_info: free_info || self.data.free_info,
           summary: localSummary.concat(summary),
-          cart_list: localCartList.concat(cart_list)
+          cart_list: localCartList.concat(cart_list),
+          loadAnimation: false
         });
-        wx.hideLoading();
+
       }
     })
   },

pages/shopCart/shopCart.wxml

@@ -1,3 +1,6 @@
+<import src="../components/template/loadAnimation/loadAnimation.wxml" />
+<template is="shopcartLoad" wx:if="{{loadAnimation}}"/>
+
 <view style='background:#fff;' wx:if="{{summary.length <= 0}}">
   <view class='flex_center'>
     <image style='width:200rpx;' mode='widthFix' src='../../image/empty_cart.png'></image>
@@ -9,12 +12,6 @@
     <button size='mini' bindtap='skip_index' style='margin:20rpx 0;background: #2b2b2b;' type='warn'>去逛逛</button>
   </view>
 </view>
-
-
-
-
-
-
 <view class='cart_list'>
   <block wx:for="{{cart_list}}" wx:key="*this">
   <!-- 套餐情况下循环 -->

pages/shopCart/shopCart.wxss

@@ -1,3 +1,5 @@
+@import "../components/template/loadAnimation/loadAnimation.wxss";
+
 .cell_box {
   background: #ffffff;
   margin-bottom: 8rpx;