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

  • 相关阅读:
    java数据结构-循环链表实现
    java数据结构-普通链表实现测试
    java数据结构-普通链表实现
    java数据结构-排序算法-插入算法
    java数据结构-排序算法-快排算法
    java数据结构-递归算法-简单递归算法
    python------------------异常处理
    自定义Web框架
    Django框架第一篇
    Django框架之第二篇
  • 原文地址:https://www.cnblogs.com/liuqianrong/p/9166921.html
Copyright © 2011-2022 走看看