微信小程序的购物车功能

原创

已于 2023-10-09 11:02:56 修改 · 9.5k 阅读

105 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #移动端 #前端

于 2018-10-13 09:52:00 首次发布

本文介绍了微信小程序购物车功能的实现，包括单选、全选/取消全选、数量增减、总价统计等关键功能，并提供了WXML、WXSS和JS的部分代码示例。在页面加载时默认全选并计算总价，还强调了数量不能少于1的限制。通过阅读，读者可以学习到微信小程序的相关知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序的购物车功能

这个微信小程序的购物车功能，通过参照各大电商平台的功能和界面，然后总结出来的。

效果图

购物车

功能描述

可单选，全选/取消全选
增加、减少、手动编辑商品的数量
根据商品的数量统计价格

代码实现

此处省略一万字，废话不多说，直接上代码吧！

WXML静态布局、绑定“死”数据（主要功能代码）

<view class="list">
    <block wx:for="{
  
  {dataArr}}" wx:key="index" wx:for-item="item">
      <view class="li clearfix">
        <!-- 单品选择按钮 -->
        <view class="check" wx:if="{
  
  {item.selected}}" bindtap="selectList" data-index="{
  
  {index}}"><text class="iconfont icon-dagou"></text></view>
        <view class="check" wx:else bindtap="selectList" data-index="{
  
  {index}}"><text class="iconfont icon-choose"></text></view>

        <view class="img fl"><image src="{
  
  {item.image}}" mode="aspectFill"></image></view>
        <view class="right fr">
          <view class="title ellipsis-2">{
  
  {item.title}}</view>

          <!-- 增加减少编辑数量 -->
          <view class="num_w clearfix">
            <view class="fl" bindtap=