uniapp 购物车案例

最新推荐文章于 2024-05-22 02:49:32 发布

码农中的小菜鸡

最新推荐文章于 2024-05-22 02:49:32 发布

阅读量383

点赞数

文章标签： uni-app javascript 前端

本文链接：https://blog.youkuaiyun.com/oldolder/article/details/130426312

版权

这是一个商城类项目基本必带的模块——购物车

此案例包含单选和全选的交互、数量的修改、总价的联动。

数据都是静态的数据，样式根据个人需要修改。

页面如下：
在这里插入图片描述

html代码：

	<view class="cart">
		<view class="content">
			<view class="list" v-for="item in list" :key="item.id">
				<view class="left">
					<checkbox-group @change="checkboxChange(item, item.id)"><checkbox :value="item.id" :checked="item.isChecked" /></checkbox-group>
					<image :src="item.img" class="img"></image>
				</view>
				<view class="center">
					<view class="name">{
  { item.name }}</view>
					<view class="size">规格：{
  { item.sku }}</view>
					<view class="count">数量：x{
  { item.count }}</view>
				</view>
				<view class="right">
					<view class="price">单价￥{
  { item.price }}元</view>
					<view class="update-count">
						<view class="reduce" @tap="editNum(item.id, -1)">-</view>
						<view class="cart-count">{
  { item.count }}</view>
						<view class="add" @tap="editNum(item.id, 1)">+</view>
					</view>