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>

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

微信小程序|开发实战篇之二
开发实战篇之二前言 1.零碎知识点和优化点 1.1 ES6模板字符串 1.2 ES6扩展运算符 1.3 独立更新like组件状态 1.4 自定义组件支持hidden 2.音乐music组件开发 2. ...
微信小程序|开发实战篇之一
开发实战篇之一前言 1.通用方法的封装 2.数据获取方法的封装 2.1 抽离classic.js中的request()方法 2.2 组件数据传递 3.movie组件的创建 3.1 组件代码开发 3. ...
微信小程序|开发实战篇之四
开发实战篇之四前言 1.用户页面my的开发 1.1 my.wxml骨架文件 1.2 my页面的布局和样式分析 1.2.1 从原型页面来分析: 1.2.2 继续分析每个大组件中的小组件布局: 1.3 ...
微信小程序|开发实战篇之三
开发实战篇之三前言 1.使用Promise获取多个异步方法的结果 2.高阶组件-search 2.1 search组件的基本结构 2.1.1 search组件的骨架index.wxml文件 2.1. ...
微信小程序|开发实战篇之七-steps进度条组件
开发实战篇之七前言 0.知识点补充 0.1 $emit()函数 0.2 wxs 0.3 ⚡组件间关系 1.steps进度条组件 1.1.step进度条单元的骨架文件wxml 1.2.step进度条单 ...
微信小程序|开发实战篇之六-pagination分页组件
开发实战篇之六前言 1.分页组件pagination 2.pagination代码分析 2.1 wxml骨架文件 2.2 wxss样式 2.3 pagination的逻辑文件前言实战篇内容参考: ...
微信小程序|开发实战篇之五-slide-view滑动菜单组件
开发实战篇之五前言 1.微信小程序操作dom元素 1.1 slide-view组件的wxml骨架文件 1.1.1 涉及movable-view组件属性 1.2 slide-view组件的js文件 1 ...
微信小程序|开发实战篇之request请求（单个、多个参数，json对象，header）
开发实战篇之request请求前言 1.发送单个.多个参数的request 2.发送JSON对象的request 3.发送header的request 前言小程序发送网络请求常会遇到的问题: 请求 ...
微信小程序|开发实战篇之九-image-picker图片选择器组件及其子组件
开发实战篇之九前言 1.grid格子组件 1.1 grid骨架文件wxml 1.2 grid的js文件分析 1.3 grid-item的wxml文件分析 1.4 grid-item的wxss文件分析 ...

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

products页面和cart页面

1、商品页面解构

2、购物车页面解构

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

最新文章

热门文章