• 微信小程序购物车


    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如果为空,提示至少勾选一个商品

  • 相关阅读:
    3dsmax script export/import tools
    BOBO输出插件的一些信息
    任务
    说说谷歌在线电子表格
    EditGrid在线编辑Excel文档
    如何控制,textField的宽度,
    在线文档管理平台
    雅虎的这个效果,有机会实现一下
    推荐在线电子表格EditGrid
    我的台账录入界面
  • 原文地址:https://www.cnblogs.com/liuqianrong/p/9166921.html
Copyright © 2020-2023  润新知