小程序中购物车简单功能的实现

对一个电商网站来说，购物车界面是必不可少的，因此，我将其页面中的功能实现做如下的展示（界面虽丑但功能俱全）,希望给大家带来方便???

• wxml

  <view class='main'>
    <view class='cart_Title' wx:if='{{hasList}}'>
      <!-- 标题 -->
      <text class='options'>全选</text>
      <text class='options'>名称</text>
      <text class='options'>价格</text>
      <text class='options'>数量</text>
      <text class='options'>删除</text>
      <!-- 数据列表 -->
      <view class='cart-box' wx:for='{{carts}}' wx:key='{{index}}'>
      <!-- 全选反选按钮 -->
        <icon wx:if='{{item.selected}}' type='success' color='red' bindtap='handleselectList' data-index='{{index}}'></icon>
        <icon wx:else type='circle' bindtap='handleselectList' data-index='{{index}}'></icon>
        <!-- 数据名称 -->
        <text class='cart-title options'>{{item.title}}</text>
        <!-- 数据价格 -->
        <text class='cart-price options'>{{item.price}}</text>
        <!-- 数量的加减操作 -->
        <view class='count'>
          <text class='redus' data-index='{{index}}' bindtap='handleredus'>-</text>
          <text class='cart-count'>{{item.num}}</text>
          <text class='add' data-index='{{index}}' bindtap='handleadd'>+</text>
        </view>
        <!-- 删除 -->
        <text class='delete' bindtap='handledel' data-index='{{index}}'>x</text>
      </view>
    </view>
    <!-- 当没有数据时显示的内容 -->
    <view wx:else class='delAfter'>{{deleteData}}</view>
  </view>
  
  <!-- 底部 -->
  <view class='cart-bottom'>
      <icon type='success' color='red' wx:if='{{selectAllStatus}}' bindtap='selectAll'></icon>
      <icon type='circle' color='#ccc' wx:else bindtap='selectAll'></icon>
      <text>全选</text>
      <text class='total'>
        数量：<text>{{totalCount}}</text>
      </text>
      <text class='total'>
        合计：￥<text>{{totalPrice}}</text>
      </text>
  </view>
  

• js

  Page({
  
    /**
     * 页面的初始数据
     */
    data: {
      carts:[],  //存放数据
      hasList:false,
      deleteData: '',//当页面上没有数据时显示的
      selectAllStatus:true,    //全选状态
      totalPrice: 0,  //总价格
      totalCount: 0    //总数量
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {   //页面显示时出现2秒的加载过程
      wx.showToast({
        title: 'loading',
        icon:'loading',
        duration:2000
      });
      this.setData({
        hasList:true,
        carts: [
          { id: 1, title: "荔枝", selected: true, num: 1, price: 20 },
          { id: 2, title: "苹果", selected: true, num: 1, price: 15 }, 
          { id: 3, title: "香蕉", selected: true, num: 1, price: 3 },
        ]
      })
      //显示页面时就调用总价格和总数量
      this.getTotalPrice();
      this.totalCount();
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
      
    },
    /**
     * 当前商品选中事件
     */
    handleselectList(e){
      //获取当前的下标
      const index=e.currentTarget.dataset.index;
      //获取是否选中状态
      const selected = this.data.carts[index].selected;
      //默认全选的复选框是选中的
      this.data.selectAllStatus=true;
      //true --- false之间的切换
      this.data.carts[index].selected=!selected;
      //循环数组，判断选中还是未选中（selected）
      for (var i = this.data.carts.length - 1; i>=0;i--){
        if (!this.data.carts[i].selected){
          this.data.selectAllStatus=false;
          break;
        }
      }
      this.setData({ 
        //让最后的结果显示在页面上
        carts: this.data.carts,
        selectAllStatus: this.data.selectAllStatus
      });
      this.getTotalPrice();
      this.totalCount();
    },
    /**
     * 数量增加事件
     */
    handleadd(e){
      const index = e.currentTarget.dataset.index;
      let num=this.data.carts[index].num;
      //注意此处的num不能用const申明（let声明的变量可以改变，值和类型都可以改变，没有限制。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。）
      num=num+1;
      this.data.carts[index].num=num;
      this.setData({
        carts: this.data.carts
      });
      this.getTotalPrice();
      this.totalCount();
    },
    /**
     * 数量减少事件
     */
    handleredus(e){
      let index=e.currentTarget.dataset.index;
      let num=this.data.carts[index].num;
      if (num <= 1) {
        return;
      }
      num=num-1;
      this.data.carts[index].num=num;
      this.setData({
        carts:this.data.carts
      });
      this.getTotalPrice();
      this.totalCount();
    },
    /**
     * 删除事件
     */
    handledel(e){
        let index = e.currentTarget.dataset.index;
        var that = this;
       //选中时才可以删除
        if (that.data.carts[index].selected) {
          wx.showModal({
            title: '提示',
            content: '你确定要删除吗？',
            success(res){
              if(res.confirm){
                  that.data.carts.splice(index, 1)
                  that.setData({
                    carts: that.data.carts
                  })
                  if (!that.data.carts.length) {
                    that.setData({
                      hasList: false,
                      deleteData: "购物车空空如也！"
                    })
                  } else {
                    that.getTotalPrice();
                    that.totalCount();
                  }
                }
              }
          })
        }else{
          wx.showModal({
            title: '提示',
            content: '你没有选中哦！',
          })
        }
    },
    /**
     * 总价
     */
    getTotalPrice(){
      let total=0;
      let carts = this.data.carts
      for (let i = 0; i < carts.length; i++){
        if(carts[i].selected){
          total += carts[i].num * carts[i].price;
        }
      }
      this.setData({
        carts:carts,  //渲染数据
        totalPrice:total.toFixed(2)
      })
    },
    /**
     * 总数量
     */
    totalCount(){
      let count=0;
      let carts=this.data.carts;
      for(let i=0 ;i<carts.length;i++){
        if(carts[i].selected){
          count+=carts[i].num;
        }
      }
      this.setData({
        carts:carts,
        totalCount:count
      })
    },
    /**
     * 全选状态
     */
    selectAll(e){
      let selectAllStatus=this.data.selectAllStatus;
      let carts = this.data.carts
      //开始的状态为未选中，当选中时执行以下代码
      //true---false之间的切换
      selectAllStatus =!selectAllStatus;
      for(let i=0; i<carts.length;i++){
        carts[i].selected=selectAllStatus;
      }
      this.setData({
        selectAllStatus: selectAllStatus,
        carts:carts
      });
      this.getTotalPrice();
    }
  })
  

  $注意：$
  js代码看着很多，但其实并不复杂，理清每个功能即可。在js文件中注意let与const的区别：

  • let声明的变量可以改变，值和类型都可以改变，没有限制。
  • const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

• css

  .main{
    padding: 5px 0;
  }
  .cart_Title{
    margin:0 10px 0;
  }
  .options{
    width:60px;
    text-align: center;
    display: inline-block;
  }
  .cart-box{
    padding-left: 13px;
  }
  .cart-title{
    margin-left: 21px;
  }
  /* .cart-price{
    margin-right: 10px;
  } */
  .count{
    display: inline-block;
    margin-right: 20px;
  }
  .cart-count{
    padding: 10px;
  }
  .delAfter{
    text-align: center;
    margin-top: 100px;
    color: rgb(231, 67, 67);
  }
  .redus{
    border:1px solid #eee;
    padding: 0 5px;
  }
  .add{
    border:1px solid #eee;
    padding: 0 5px;
  }
  .cart-bottom{
    position: absolute;
    bottom: 30px;
    left: 20px;
  }
  .cart-bottom icon{
    margin-right: 10px;
    vertical-align: middle;
  }
  .total{
    margin-left: 15px;
    display: inline-block;
  }
  .total text{
    color: rgb(240, 72, 72);
  }
  

• 效果图
  
  简单的页面实现就完成啦，若有问题欢迎指出！✏️✏️✏️✏️✏️✏️