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>