day08-购物车

最新推荐文章于 2023-07-31 00:10:33 发布

碼德浮樂

最新推荐文章于 2023-07-31 00:10:33 发布

阅读量357

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_45583708/article/details/103203831

版权

本文详细介绍了购物车功能的实现，包括根据购物车数据判断显示空或非空购物车、购物车列表渲染、商品数量加减操作、复选框同步、滑动删除、提交订单区域的总价计算、全选反选功能、显示购物车徽章数量以及提交订单流程。

摘要由CSDN通过智能技术生成

购物车

根据内容来判断显示空白购物车还是非空购物车

根据购物车是否有数据来判断是否显示空白的购物车布局

data = {
   
    cart: []
}

onLoad() {
   
    console.log(1);
    // 将全局的购物车数据赋值给data里面的 cart
    this.cart = this.$parent.globalData.cart
}

computed = {
   
    //    判断购物车是否为空
    isEmpty() {
   
        if (this.cart.length <= 0) {
   
            return true
        } else {
   
            return false
        }
    }
}

在布局里面利用 wx:if 来判断显示

<view>
    <!-- 空白的购物车 -->
    <view class="empty_cart" wx:if="{
    {isEmpty === true}}">
        <image src="/assets/empty_cart/cart_empty@2x.png" />
        <view>您的购物车空空如也~</view>
    </view>
    <!-- 非空购物车 -->
    <view class="cart_container" wx:else>购物车</view>
</view>

制作购物车列表

购物车标题

利用vant 的 cell 单元格组件来进行渲染

<van-cell title="购物车列表" icon="shopping-cart-o" />

购物车列表

利用Card 商品卡片组件来进行渲染

<block wx:for="{
    {cart}}" wx:key="id">
    <van-card title="{
    {item.name}}" thumb="{
    { item.pic }}" />
</block>

利用插槽的方式来添加价格与数量的布局，数量的加减，利用 vant 的 stepper 组件来渲染

<van-card title="{
    {item.name}}" thumb="{
    { item.pic }}">
    <!-- 自定义商品的描述区域 -->
    <view slot="desc" class="desc">
        <!-- 价格 -->
        <text