uni——模拟购物车（全选、全不选、步进器、结算等）

最新推荐文章于 2024-03-05 17:40:23 发布

耶啵奶膘

最新推荐文章于 2024-03-05 17:40:23 发布

阅读量664

点赞数

分类专栏： uni、vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xulihua_75/article/details/130506362

版权

本文通过案例演示和代码展示，详细介绍了如何在uniApp中实现购物车的全选、全不选、商品数量步进器以及结算等功能，重点讨论了前端交互逻辑和vue.js的运用。

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

案例演示

在这里插入图片描述

案例代码

<template>
	<pageBox ref="pagebox">
		<view class="container">
			<view class="greenBg">
				<view class="manage">
					<view class="selectNum">
						共<text class="nums">{
  {allNum}}</text>件商品
					</view>
					<!-- 切换栏 -->
					<view class="tabBox">
						<block v-for="(item,index) in tabList" :key="item.value">
							<view class="tabItem" :class="current == item.value?'tabActive':''"
								@click="tabChange(item.value)">
								{
  {item.name}}
							</view>
						</block>
					</view>
					<view class="edit" v-if="isEdit" @click="edit">
						<image src="/static/images/mall/edit.png" mode="aspectFill"></image> 编辑
					</view>
					<view class="edit" v-if="!isEdit" @click="cancelEdit">
						<image src="/static/images/mall/cancel.png" mode="aspectFill"></image>取消
					</view>
				</view>
			</view>
			<!-- 无内容显示 -->
			<!-- <view class="placeholder" v-if="list.length==0&&!loading" style="position: fixed;top: 40%;left: 50%;transform: translateX(-50%);">
			<u-empty :icon="$common.image('/static/empty/emptyData.png')" text="购物车空空如也~"></u-empty>
		</view> -->
			<!-- 列表 -->
			<view class="list">
				<u-checkbox-group v-model="checkboxId" placement="column" activeColor="#60B347">
					<!-- 循环体start -->
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="checkBox">
							<u-checkbox :name="item.id" shape="circle" activeColor="#60B347" :checked="item.checked"
								@change="choose(item)"></u-checkbox>
						</view>
						<view class="productImg">
							<image src="/static/images/mall/goodImg.png" mode="aspectFill"></image>
						</view>
						<view class="productInfo">
							<view class="proName">{
  {item.name}}</view>
							<view class="proNumBox">
								<view class="proPrice">￥{
  {item.money}}</view>
								<view class="proStep">
									<u-number-box>
										<v