uniapp 实现购物车

最新推荐文章于 2024-08-10 14:32:56 发布

qcc0716

最新推荐文章于 2024-08-10 14:32:56 发布

阅读量1.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qcc0716/article/details/112388058

版权

本文介绍了使用uni-app框架如何实现购物车功能，包括预期效果的描述和详细代码实现。

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

uni-app 实现购物车

要实现的效果

在这里插入图片描述

具体实现代码

<template>
	<view>
		<view class="">
			<view class="cartlist">
				<view class="cartitem" v-for="(item,index) of cartlist" :key="index" @touchstart="drawStart" 
	    @touchmove="drawMove" 
	    @touchend="drawEnd" 
		:data-index="index"
		:style="'right:'+item.right+'px'">
					<view class="">
						<checkbox-group @change="selected(item)">
							<checkbox class="xuanzhong" :checked="item.flag" />
						</checkbox-group>
						<image src="../../static/indexImg/u=100059035,2545312220&fm=26&gp=0.jpg" mode=""></image>
						<view class="itemright">
							<view class="shopCarName">
								{
  {item.proname}}
							</view>
							<view class="shopCarPrice">
								￥{
  {item.price}}
								<!-- <text class="del" @click="del(item,index)">删除</text> -->
							</view>
							<view class="bgImg">
								<text class=&#