微信小程序乐园-checkbox（全选、全不选）

首先这是我的设计思路：

一、传入以下Json数据格式的数组  1.标题title 2.图片地址 3.数量num 4.价格price  5.是否选中selected 二、点击复选框toggle操作 如已经选中的，经点击变成未选中，反之而反之 点击依据index作为标识三、全选操作 首次点击即为全部选中，再次点击为全不选，全选按钮本身也跟随toggle变换四、点击结算按钮，将已选中的数组取出，以供通过网络提交到服务端，这里给个toast作为结果演示。五、利用stepper作加减运算，同样依据index作为标识，点完写回num值。六、布局，全选与结算按钮底部对齐，购物车商城自适应高度，类似于Android的weight。

页面代码如图:

<view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
<view class="my-wrap"> <view class="my-tlt">
{{item.title}}
</view>
<view class="my-list bordernone">
<icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" class="my-check"/>
<icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" class="my-check"/>
<image src="{{item.image}}" class="my-pic" mode="aspectFill"></image>
<view class="my-left">
<view class="my-title"> K金砖玉石电视背景墙砖</view>
<text class="my-txt">尺寸：800X800</text>
<view class="my-bnt"><!-- 减号 -->
<text class="{{minusStatuses[index]}} bnt" data-index="{{index}}" bindtap="bindMinus">-</text>
<!-- 数值 -->
<input type="number" bindchange="bindManual" class="int" value="{{item.num}}" />
<!-- 加号 -->
<text class="normal bnt" data-index="{{index}}" bindtap="bindPlus">+</text>]</view>
</view>
<view class="my-right">
<icon class="iconfont del"/>
<text class="gay">￥{{item.price}}</text>
</view>
</view>
</view><view class="float"><!-- 全选 -->
<view bindtap="bindSelectAll" class="my-sel" >
<icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20" class="l-mycheck"/>
<icon wx:else type="circle" size="20" class="l-mycheck"/>
<text>全选</text>
</view>
<view class="my-rightbox">
<view class="my-count" data='{{sep}}'><!-- 统计 -->
合计（不含运费）：￥<text>{{count}}</text>
</view>
<view class="my-bnts" bindtap="setPayment" >
结算（<text>{{number}}</text>）
</view>
</view>
</view>

首先：先定义js

在page.data里面

count:0,
number:0,
minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled'],
carts: [
{title:'自营商城',image:'../images/my.png',num:'1',price:'198.0',selected:false},
{title:'自营商城',image:'../images/my.png',num:'1',price:'100.0',selected:false},
{title:'自营商城',image:'../images/my.png',num:'3',price:'15.0',selected:false},
{title:'自营商城',image:'../images/my.png',num:'2',price:'15.2',selected:false},
{title:'自营商城',image:'../images/my.png',num:'1',price:'122.0',selected:true},
]，

carts这个你可以通过url自己传参，我这里自己写点数据，

js代码bindMinus、bindPlus分别改造为如下：

bindMinus: function(e) {
var index = parseInt(e.currentTarget.dataset.index);var num = this.data.carts[index].num;if (num > 0) {
num --;
}
var minusStatus = num <= 0 ? 'disabled' : 'normal';
var carts = this.data.carts;
carts[index].num = num;var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;this.setData({
carts: carts,
minusStatuses: minusStatuses
});
},
bindPlus: function(e) {
var index = parseInt(e.currentTarget.dataset.index);
var num = this.data.carts[index].num;
num ++;
var minusStatus = num <= 1 ? 'disabled' : 'normal';
var carts = this.data.carts;
carts[index].num = num;var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;this.setData({
carts: carts,
minusStatuses: minusStatuses
});
},

单选：这里需要判断一下已选状态，一般购物车勾选状态是记录在网络的。index值用于传值js，遍历之用。

bindCheckbox: function(e) {var index = parseInt(e.currentTarget.dataset.index);var selected = this.data.carts[index].selected;var carts = this.data.carts;
var num = parseInt(this.data.carts[index].num);
var price=this.data.carts[index].price;
if(!selected){
this.setData({
count:this.data.count+ num*price,
number:num+this.data.number});
}else{
this.setData({
count:this.data.count- num*price,
number:this.data.number-num});
}carts[index].selected = !selected;this.setData({carts: carts});

全选与全不选事件

实现bindSelectAll事件，改变全选状态

首先定义一个data值，以记录全选状态

selectedAllStatus: false

事件实现：

bindSelectAll: function() {
var selectedAllStatus = this.data.selectedAllStatus;
selectedAllStatus = !selectedAllStatus;
var carts = this.data.carts;
if(!selectedAllStatus){
for (var i = 0; i < carts.length; i++) {
carts[i].selected = selectedAllStatus;
var num = parseInt(this.data.carts[i].num);
var price=parseInt(this.data.carts[i].price);
this.setData({
count:this.data.count-num*price,
number:this.data.number-num});
}
}

微信小程序乐园-checkbox（全选、全不选）相关推荐

微信小程序实现线上线下全渠道精准运营
从支付宝推出余额宝.花呗等功能大幅培养用户理财习惯,到微信支付通过微信红包打通"朋友圈",微信支付和支付宝的擂台之战从未平息,面对10亿交易笔数到20亿的跨越,较量已经从扫码支付延 ...
原生微信小程序使用class 三元运算符实现多选案例
原生微信小程序使用class 三元运算符实现多选案例如下图所示: 1,在vue中开发非常容易实现,使用数组的includes方法判断即可,但是在原生小程序中不可以 2,要及时的对定义的遍历进行set ...
微信小程序自定义checkbox样式
微信小程序自定义checkbox样式 checkbox .wx-checkbox-input{width:16px;height:16px;} checkbox .wx-checkbox-input. ...
api 微信小程序组件库colorui_2020最全微信小程序UI组件库合集
概述 " 这可能是2020年最全的UI组件集合了,希望对你有帮助,如果觉得好,别忘了给小编给点点赞鼓励! 微信小程序实用UI组件库合集第一款官方WeUI组件库 " 地址: ht ...
【愚公系列】2022年09月微信小程序-图片加载和全屏适配问题
文章目录前言一.图片加载二.适配机型实现全屏背景图前言在使用图片问题中可能会遇到各种各样的问题,比如图片加载不出来,图片显示在不同机型效果不同,图片加载展示问题等等. 微信小程序image相 ...
微信小程序轮播图放大全屏预览（爆料）
轮播图放大预览效果的实现前言一.wx.previewImage接口API 官方介绍: 代码示例: 二.图片全屏预览 1.效果展示 2.编码 img.wxml img.js img.wxss 三.轮 ...
微信小程序中短信验证码登录全流程及代码
才开始学习小程序,用到短信验证码登录免费注册账号: http://sms_developer.zhenzikj.com/zhenzisms_user/register.html 完整demo下载: ...
微信小程序多图片上传全栈实战
本篇教程技术栈:springBoot(Java后端)+ 微信小程序.完整的图片上传教程. 页面截图,点击图片右上角按钮可以删除图片. 1.图片上传需要使用wx.uploadFile(Object o ...
sublime福音：微信小程序组件及API补全插件
微信自带的编辑器操作起来各种不顺手,调试的时候需要用到,但是编辑的时候还是用自己熟悉的编辑器好一点. 将文件目录导入到sublime,在sublime编辑保存后,回到小程序开发工具刷新页面即可. 下面 ...

微信小程序乐园-checkbox（全选、全不选）

微信小程序乐园-checkbox（全选、全不选）相关推荐

最新文章

热门文章