微信小程序购物车

1.单选与全选   

selected为true时,渲染的是勾选的选择框;当selected为false时,渲染的是未勾选的选择框。为了用户体验好一点,可勾选的区域要大一些,icon的width和height要大于设计稿的尺寸,放icon背景图的时候,水平和垂直居中即可。

单选:当加载完页面,默认每一个商品都为勾选的状态,给cartList中的每一个selected(每一个商品的勾选状态)赋值为true。当点击单选,获取到该商品(点击事件的e.currentTarget.dataset.index)的selected并赋反值

全选:当加载完页面,默认全选状态,给checkAll(全选状态)赋值为true。当点击全选,获取到checkAll的值并赋反值,给cartList中的每一个商品都赋上这个值

<view class='cartItem clearfix' wx:for="{{cartList}}" wx:key="unique"> 
<view class='proCheckbox checked fl' wx:if="{{item.selected}}">
<icon data-index="{{index}}" bindtap="selectSingle"/>
</view>
</view>

2.数量加减

点加号:点加号的那个商品(e.currentTarget.dataset.index)quantity自增1

点减号:点加号的那个商品(e.currentTarget.dataset.index)quantity自减1,当quantity等于1时,删除商品

3.多选删除

当点击删除,把product_ids(选中的商品id)传给后台

请求接口获取购物车列表getCartList来实现删除后刷新购物车

product_ids如果为空,提示至少勾选一个商品

猜你喜欢

转载自www.cnblogs.com/liuqianrong/p/9166921.html