小程序--购物车全选与单选的实现

最新推荐文章于 2024-04-15 10:00:00 发布
最新推荐文章于 2024-04-15 10:00:00 发布
阅读量1.4k 收藏 10
点赞数 4
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz_xiaojun/article/details/109116290
版权

之前不会，现在弄懂了，就记录下来哈，看代码

## wxml代码

	<!-- 当购物车有商品时 -->
	<view>
		<!-- 旗舰店标题 -->
		<view class="cartTitleBigView">
			<view class="text1">
				<image src="/images/indexImages/icon13.png" class="img1"></image>
				<view>青岛啤酒官方旗舰店</view>
				<image src="/images/indexImages/icon2.png" class="img2"></image>
			</view>
			<view class="text2" bindtap="editorGoods">{{editor}}</view>
		</view>
		<!-- 购物车商品 -->
		<checkbox-group bindchange="checkboxChange">
			<view class="cartGoodsBigView" wx:for="{{cartGoodsList}}" wx:key="key">
				<!-- 换购 -->
				<!-- <view class="buyBigView">
					<checkbox class="radio" value="{{item.goods_id}}" checked="{{item.checked}}"></checkbox>
					<view class="text1">换购</view>
					<view class="text2">
						<text>再购40元,立享【满99元可换购】</text>
						<image src="/images/indexImages/icon11.png"></image>
					</view>
					<view class="text3">
						<text>去凑单</text>
						<image src="/images/indexImages/icon12.png"></image>
					</view>
				</view> -->
				<!-- 商品信息 -->
				<view class="goodsInfoBigView">
					<view style="display:flex;height:180rpx;align-items: center;">
							<checkbox class="radio" value="{{item.goods_id}}" checked="{{item.checked}}"></checkbox>		
						<image src="/images/indexImages/img02.png" class="goodsInfoImage"></image>
					</view>
					<view class="goodsInfoView">
						<view class="text1">青岛啤酒10度500ml*12福禧罐/箱</view>
						<view class="text2">
							<text>500ml*12听</text>
							<image src="/images/indexImages/smartIdentify.png"></image>
						</view>
						<view class="text3">担保</view>
						<view class="goodsInfoPriceView">
							<view>￥<text class="price">59</text></view>
							<view class="goodsInfoNumberView">
								<view style="{{num==0?'backcolor:#f7f8fa;color:#c8c9cc;':''}}" bindtap="reduceNum">-</view>
								<view>{{num}}</view>
								<view bindtap="increaseNum">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</checkbox-group>
	</view>
<!-- 编辑商品 弹出框 -->
<view class="edtiorBigView">
	<checkbox-group class="checkAllView" bindtap="checkAll">
		<label>
			<checkbox checked="{{select_all}}"></checkbox>全选
		</label>
	</checkbox-group>
	<view class="delete {{select_single?'deleteSelect':''}}" wx:if="{{editor=='完成'}}" bindtap="delete_car">删除</view>
	<view wx:else class="settlementView">
		<view class="totalView">
			<view class="text1">合计：<text class="text2">￥</text><text class="text3">59</text></view>
			<view class="text4">不含运费</view>
		</view>
		<view class="settlement {{select_single?'settlementSelect':''}}">结算</view>
	</view>
</view>

## wxssl代码

/* 旗舰店标题 */
.cartTitleBigView{
  width: 100%;
  height: 100rpx;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.cartTitleBigView .text1{
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 37rpx;
  color: #333333;
}
.cartTitleBigView .text1 .img1{
  width:33rpx ;
  height: 33rpx;
  margin:5rpx 15rpx 0 0;
}
.cartTitleBigView .text1 .img2{
  width: 30rpx;
  height: 30rpx;
  margin:5rpx 0 0 15rpx;
}
.cartTitleBigView .text2{
  font-size: 32rpx;
  color: #505050;
}
/* 购物车商品 */
.cartGoodsBigView{
  width: 95%;
  margin: 30rpx auto;
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
}
/* 换购 */
.buyBigView{
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 40rpx;
}
checkbox .wx-checkbox-input {
  /* 自定义样式.... */
  height: 35rpx;
  width: 35rpx;
  border-radius: 50%;
  border: 2rpx solid #6cbe72;
  background: transparent;
  margin-bottom: 5rpx;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  border-radius: 50%; /* 圆角 */
  width: 35rpx; /* 选中对勾后，对勾背景的大小，不要超过背景的尺寸 */
  height: 35rpx; /* 选中对勾后，对勾背景的大小，不要超过背景的尺寸 */
  line-height: 35rpx;
  text-align: center;
  font-size: 25rpx; /* 对勾大小 30rpx */
  color: #fff; /* 对勾颜色 白色 */
  background: #6cbe72;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}
.buyBigView .text1{
   padding: 3rpx 8rpx;
   box-sizing: border-box;
   background-color: #f0f9f1;  
   border-radius: 50rpx;
   font-size: 26rpx;
   color: #6cbe72;
   margin-right: 10rpx;
}
.buyBigView .text2{
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 27rpx;
  color: #333333;
}
.buyBigView .text2 image{
    width: 35rpx;
    height: 35rpx;  
}
.buyBigView .text3{
  display: flex;
  align-items: center;
  font-size: 27rpx;
  color:#6cbe72 ;
}
.buyBigView .text3 image{
  width: 25rpx;
  height: 25rpx;
  margin-top: 5rpx;
}
/* 商品信息 */
.goodsInfoBigView{
  width: 100%;
  display: flex;
}
.goodsInfoImage{
  width: 190rpx;
  height:190rpx;
  border-radius: 20rpx;
  margin-right: 15rpx;
}
.goodsInfoView{
  flex:1;
  height: 100%;
  font-size: 28rpx;
  word-break: break-all;
}
.goodsInfoView .text2{
  width: 220rpx;
  background-color: #f7f8fa;
  padding: 0 20rpx;
  box-sizing: border-box;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20rpx 0;
  font-size: 26rpx;
  color: #969799;
  border-radius: 10rpx;
}
.goodsInfoView .text2 image{
  width: 25rpx;
  height: 25rpx;
}
.goodsInfoView .text3{
  font-size: 26rpx;
  color: #0cc363;
  margin-bottom: 20rpx;
}
.goodsInfoPriceView{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  color:#7ac47f;
}
.goodsInfoPriceView .price{
  font-size: 40rpx;
  font-weight: bold;
}
.goodsInfoNumberView{
  display: flex;
  align-items: center;
  color: #323233;
}
.goodsInfoNumberView>view{
  width: 70rpx;
  height: 60rpx;
  background-color:#f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5rpx;
  font-size:35rpx;
  border-radius: 5rpx;
}

/* 编辑弹出框 */
pages{
  position: relative;
}
.edtiorBigView{
  width: 100%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:15rpx 30rpx;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
}
.checkAllView{
  display: flex;
  align-items: center;
  font-size: 33rpx;
  color: #585858;
}
.edtiorBigView .delete{
  width: 220rpx;
  height: 90rpx;
  font-size: 40rpx;
  font-weight: bold;
  background-color: #e7e9ec;
  color: #969799;
  text-align: center;
  line-height: 80rpx;
  border-radius: 50rpx;
}
.edtiorBigView .deleteSelect{
  background-color: #6cbe72;
  color: white;
}
/* 结算 */
.settlementView{
  display: flex;
  align-items: center;
}
.totalView{
  margin-right: 20rpx;
  text-align: right;
}
.totalView .text1{
  font-size: 28rpx;
  font-weight: bold;
}
.totalView .text2{
  color:#6cbe72 ;
}
.totalView .text3{
  font-size: 35rpx;
  color:#6cbe72 ;
}
.totalView .text4{
  color:gray ;
  font-size: 30rpx;
}
.settlementView .settlement{
  width: 220rpx;
  height: 90rpx;
  font-size: 40rpx;
  font-weight: bold;
  background-color: #e7e9ec;
  color: #969799;
  text-align: center;
  line-height: 80rpx;
  border-radius: 50rpx;
}
.settlementView .settlementSelect{
  background-color: #6cbe72;
  color: white;
}

JS代码

data:{
// 购物车商品
cartGoodsList:[
{},
{},
{},
],
// 全选
select_all: false,
select_single:false, //单选
checkbox_goodsid:'',
// 商品数量
num:0,
// 编辑
editor:'编辑',
},

// 编辑商品
  editorGoods:function(){
    var that=this;
    var arr='0';
    if(this.data.editor=='编辑'){  //所有商品不被选中
      for (let i = 0; i < that.data.cartGoodsList.length; i++) {
        //循环给每个商品的checked赋值
          that.data.cartGoodsList[i].checked =false
        }
        console.log("arr="+arr)
        //赋值
         that.setData({
          cartGoodsList: that.data.cartGoodsList,
           select_all:false,
           editor:'完成'
         })
    }else{
      this.setData({
        editor:'编辑'
      })
    }
  },
  // 全选
  checkAll:function(){
    this.setData({
      checkAll:!this.data.checkAll,
    })
    var that=this;
    var arr='0';
      //that.data.cartGoodsList.length是商品的个数
    for (let i = 0; i < that.data.cartGoodsList.length; i++) {
      //循环给每个商品的checked赋值
        that.data.cartGoodsList[i].checked = (!that.data.select_all)
        if (that.data.cartGoodsList[i].checked == true) {
          // 全选获取选中的值  以字符串拼接的形式 拼成一个字符串
           arr = arr  +","+ that.data.cartGoodsList[i].goods_id;
        }
      }
      console.log("arr="+arr)
      //赋值
       that.setData({
        cartGoodsList: that.data.cartGoodsList,
         select_all: (!that.data.select_all),
         checkbox_goodsid: arr
       })
      //  设置按钮的颜色
       if(that.data.select_all==true){
          that.setData({
            select_single:true
          })
       }else{
        that.setData({
          select_single:false
        })
       }
  },
  
   // 单选
   checkboxChange: function (e) {
    var that =this;
    //这加个0 是我为了方便后台处理。
    var checkbox_goodsid = 0+ ','+that.data.checkbox_goodsid;
    this.setData({
      checkbox_goodsid: checkbox_goodsid,//单个选中的值
    })
    console.log("checkbox_goodsid=" +that.data.checkbox_goodsid)
  
    // 计算选中了多少个商品   //  设置按钮的颜色
    var value=e.detail.value;
    console.log(value.length);
    console.log(that.data.cartGoodsList.length);  //总商品的个数
   if(value.length>0 &&value.length<that.data.cartGoodsList.length){
       //选中有但没有完全选中时
       that.setData({
        select_single:true,
        select_all:false,
         })
   }else if(value.length==that.data.cartGoodsList.length){
     //商品全部选中的时候
      that.setData({
         select_single:true,
         select_all:true,
        })
   }else{  //没有选中商品时
    that.setData({
      select_single:false,
      select_all:false,
     })
   }
   
  },
孤独的造梦者~君
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
10-15
主要介绍了微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能,本文通过截图实例代码给大家介绍的非常详细，需要的朋友可以参考下
自定义购物车二级checkbox 全选、单个选择
03-16
自定义购物车二级checkbox 全选、单个选择 实现大部分浏览器兼容
【uniapp 开发小程序】购物车功能，实现全选、反选、单选、计算总价
weixin_48596030的博客
06-26 2076
/ 判断每一个商品是否是被选择的状态。
“购物车”页面的制作，实现购物车页面的基本功能，包括勾选商品，改变商品数量、“全选”的功能实现。
最新发布
weixin_51996255的博客
04-15 260
【代码】“购物车”页面的制作，实现购物车页面的基本功能，包括勾选商品，改变商品数量、“全选”的功能实现。
微信小程序批量编辑(购物车也适用)
04-09
微信小程序,批量编辑数据,适用于购物车等,包含弹窗提交数据等效果,压缩包内有效果截图
微信小程序单选radio及多选checkbox按钮用法示例
11-28
本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考，具体如下： 1.单选：radio 实例： js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ var Id=e.value.id this.setData({ radioId:Id }) }, }) wxml: <radio-group class="radi
微信小程序--购物车功能
03-29
微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。 需求 (此图片来源于网络，如有侵权，请联系删除! ) 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出...
购物车小程序
04-18
在开发“购物车小程序”时，我们需要关注的关键知识点包括用户界面设计、数据管理、状态管理、事件处理以及响应式更新。下面将详细阐述这些方面。 1. 用户界面设计： - 全选与单选：在购物车页面，通常会有一个...
微信小程序实现购物车功能
01-22
本文实例为大家分享了微信小程序实现购物车功能的具体代码，供大家参考，具体内容如下 1、购物车界面功能实现 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出总价 单个商品购买数量的...
微信小程序之购物车功能
12-11
微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。 需求 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除...
8 | 小程序实战之购物车（收货地址授权 + 商品全选反选 + 总价格和总数量的计算 + 结算按钮功能）
NSX-Truth
08-20 1956
8.1 效果 8.2 收货地址 8.2.1 收获地址按钮样式 注意在cart文件夹下 <!-- 收货地址 --> <view class="revice_address_row"> <view class="address_btn"> <button bindtap="handleChooseAddress" type="primary" plain >获取收货地址 </button>
微信小程序学习 radio如何取消选择，多个radio选择其中一个
Aure219的博客
12-23 4352
微信小程序前端学习，radio标签，radio如何取消选择，多个标签如何选择
微信小程序实现checkbox全选全不选
m0_53912016的博客
03-24 2096
checkbox全选全不选 效果图 代码 wxml <view class="memberList"> <view class="allSelect_box" bindtap='selectAll'> <checkbox class="checkbox" checked="{{selectilall}}" /> <text class="allSelect">全选</tex
微信小程序全选，微信小程序checkbox，微信小程序购物车
weixin_30885111的博客
11-11 947
微信小程序，这里实现微信小程序checkbox,有需要此功能的朋友可以参考下。 摘要: 加减商品数量，汇总价格，全选与全不选 设计思路： 一、从网络上传入以下Json数据格式的数组 1.标题title 2.图片地址3.数量num 4.价格price 5.是否选中selected 二、点击复选框toggle操作 如已经选中的，经点击变成未选中，反之而反之 点击依据index作为标识，...
小程序购物车功能实现【详解】
热门推荐
韩大璐
12-21 1万+
购物车列表的数据是调取后台接口拿到的，在这里有一个问题就是：调取购物车列表接口到底是在哪个声明周期执行？？？ 最开始我是写在onLoad里边的，后来在测试的时候发现一个问题，从购物车页面进入到商品详情页面，添加商品到购物车之后再回到购物车页面，发现刚刚添加的商品并没有显示在购物车里，但是添加到购物车这个操作确实是成功了的。这是什么原因呢？ 因为我的 购物车页面是tabBar的页面，只有在第一次进入...
微信小程序购物车之全选全不选
kbdmy的博客
09-30 1570
拿到购物车所有选择按钮的index 并且通过样式让他改变状态 在data中定义变量初始值为false 选择某个选择框时改变状态值，重新赋值就OK every时js数组中的一个方法，它主要作用与判断所有值是否满足自定义的条件，如全部满足则返回true否则为false;在这里这个方法主要作用于当商品状态全为true时全选状态也为true。 全选的话就好做了; 点击全选时让数据中所有的状态值为true,当然也别忘记让全选按钮状态也为true ...
微信小程序 多选框全选与取消全选
zhaoguanghe的博客
08-08 1万+
page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "111",text: "text1",typ: "type
小程序购物车优化全选，反选，单选控制价格等
weixin_45244453的博客
10-09 571
有需求的可以直接复制看看，几乎都会有注释 <!--pages/map/map.wxml--> <view class='container'> <!-- 加入的商品列表 --> <view class="addGoodsList"> <view class="titTop"> <view class="to...
uniapp实现购物车 全选 单选 反选
03-30
在UniApp中实现购物车的全选、单选和反选功能，可以通过以下步骤进行操作： 1. 数据结构设计：首先，你需要定义一个购物车数据结构，可以使用数组或对象来表示每个商品的信息，例如商品名称、价格、数量等。同时，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值