微信小程序|开发实战篇之十一---商品页面和购物车页面

1、商品页面解构

• 修改数量这里使用picker组件；
• 加入购物车动画，使用css动画中的贝塞尔曲线作为运动速率，从点击起始位置运动到固定的购物车中；
• 底部是一个tab栏。

这里给出动画效果实现。需要在页面的js文件中获取起始点位置。运动结束后恢复并且更新购物车数字

/*加入购物车动效*/
  _flyToCartEffect:function(events){
      //获得当前点击的位置，距离可视区域左上角
      var touches=events.touches[0];
      var diff={
              x:'25px',
              y:25-touches.clientY+'px'
          },
          style='display: block;-webkit-transform:translate('+diff.x+','+diff.y+') rotate(350deg) scale(0)';  //移动距离
      
      // 2s移动时间   
      this.setData({
          isFly:true,
          translateStyle:style
      });

      var that=this;
      setTimeout(()=>{
          that.setData({
              isFly:false,
              translateStyle:'-webkit-transform: none;',  //恢复到最初状态
              isShake:true,
          });
          setTimeout(()=>{
              var counts=that.data.cartTotalCounts+that.data.productCounts;
              that.setData({
                  isShake:false,
                  cartTotalCounts:counts
              });
          },200);
      },1000);
  },

.small-top-img{
  height: 160rpx;
  width: 160rpx;
  right:6rpx;
  position: absolute;
  opacity: 0;
}

.small-top-img.animate{
  opacity: 1;
  /* 贝塞尔曲线的移动速率 */
  /*-webkit-transition:all 1000ms cubic-bezier(.4,.46,.3,1.31);*/
  -webkit-transition:all 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

固定购物车数字的样式：

.fiexd-cart view{
  font-size: 24rpx;
  background-color: #AB956D;
  color: white;
  position: absolute;
  right: 64rpx;
  top: 0rpx;
  height: 36rpx;
  width: 36rpx;
  line-height: 36rpx;
  border-radius: 36rpx;
  text-align: center;
}

2、购物车页面解构

• 选择按钮和全选按钮的状态更新，随之data数据更新，本地缓存更新。使用商品类型数量，来控制全选按钮和选择按钮的关系；
• 使用三个img简要实现计数器组件；
• 删除按钮更新data和本地缓存；
• 根据商品的选择状态更新全选(4)数据；
• 动态更新价格，注意数据的精度。

<!--pages/cart/cart.wxml-->
<view class="container cart-container">

    <!-- 购物车存在商品 -->
    <block wx:if="{{cartData.length>0}}">
        <!-- 商品栏 -->
        <view class="cart-box">
            <block wx:for="{{cartData}}">
                <view class="cart-item">
                    <view class="cart-item-main"> 
                        <!-- 选择按钮点击事件 -->
                        <view class="cart-item-checkbox" bindtap="toggleSelect" data-id="{{item.id}}" data-status="{{item.selectStatus}}">
                            <image wx:if="{{item.selectStatus}}" src="../resource/images/cart/circle@selected.png"></image>
                            <image wx:else src="../resource/images/cart/circle@noselected.png"></image>
                        </view>
                        <!-- 图片点击事件 -->
                        <view class="cart-item-img" bindtap="onProductsItemTap" data-id="{{item.id}}">
                            <image class="good-image" src="{{item.main_img_url}}"></image>
                        </view>
                        <view class="cart-item-word">
                            <view class="title-box">
                                <text class="title">{{item.name}}</text>
                                <text>￥{{item.price}}</text>
                            </view>
                            <view class="bottom-box">
                                <view class="cart-item-counts">
                                    <!-- 简单的数量选择器 -->
                                    <view class="btns {{item.counts==1?'disabled':''}}"
                                    bindtap="changeCounts" data-id="{{item.id}}" data-type="cut">-</view>
                                    <view class="counts">{{item.counts}}</view>
                                    <view class="btns" bindtap="changeCounts" data-id="{{item.id}}" data-type="add">+</view>
                                </view>
                                <view class="delete" data-id="{{item.id}}" bindtap="delete">×</view>
                            </view>

                        </view>

                    </view>
                </view>

            </block>
        </view>

        <!-- 底部计数栏 -->
        <view class="footer-account-box all-accounts-box">
            <!-- 全选按钮 -->
            <view class="all-select" ontap="toggleSelectAll" data-status="{{selectedTypeCounts==cartData.length?'true':'false'}}">
                <image wx:if="{{selectedTypeCounts==cartData.length}}"
                       class="title-icon" src="../resource/images/cart/all@selected.png"></image>
                <image wx:else class="title-icon" src="../resource/images/cart/all.png"></image>
                <text>全选({{selectedCounts}})</text>
            </view>
            <!-- 下单按钮 -->
            <view class="all-price-submit {{account==0?'disabled':''}}" bindtap="submitOrder">
                <view class="accounts-btn">下单</view>
                <view class="price-text">￥{{account}}</view>
                <view class="arrow-icon">
                    <image wx:if="{{account==0}}" src="../resource/images/cart/arrow@grey.png"></image>
                    <image wx:else src="../resource/images/cart/arrow.png"></image>
                </view>
            </view>
        </view>
    </block>

    <!-- 购物车没有商品 wx:if的标签可以不同 -->
    <view  wx:else class="no-data">
        您还没有添加任何商品
    </view>
    <loading hidden="{{loadingHidden}}">
        加载中...
    </loading>
</view>