zoukankan      html  css  js  c++  java
  • 微信小程序购物车

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

  • 相关阅读:
    从路径中拆分出文件名和后缀
    屏幕中判断必输
    根据tcode查找增强的程序
    IDOC练习(二、接收端配置)
    ORACLE 绑定变量用法总结
    Oracle数据类型之number
    总结:整理 oracle异常错误处理
    ISNUMBER函数的创建以及函数创建思路。
    oracle 绑定变量 bind variable(2)
    oracle 绑定变量(bind variable)(1)
  • 原文地址:https://www.cnblogs.com/liuqianrong/p/9166921.html
Copyright © 2011-2022 走看看