微信小程序全选多选效果
效果图:

代码:
wxml
<view class='hei_top'>
<view class='hei_p'>共
<text>4</text> 场</view>
<view class='hei_ps' bindtap='selectAll'>
<image data-statue="selectilall" src="{{selectilall?'/images/true_p@2x.png':'/images/true_n@2x.png'}}"></image>
<text>全选</text>
</view>
</view>
<view class='boo' wx:for="{{list}}">
<view class='boo_top'>明日11:00</view>
<view class='boo_li'>
<view class='boo_img1'>
<text class='raankstyle'>{{item.id}}</text>
</view>
<view class='boo_img2'>
<image src='/images/footballeasyicon@2x.png'></image>
</view>
<view class='boo_text'>活塞</view>
<view class='boo_text1'>@</view>
<view class='boo_text'>掘金</view>
<view class='boo_img2'>
<image src='/images/footballeasyicon@2x.png'></image>
</view>
<view class='boo_img3' data-index="{{index}}" data-name="{{item.id}}" bindtap='select'>
<image data-id='0' src="{{item.checked==true?'/images/true_p@2x.png':'/images/true_n@2x.png'}}"></image>
</view>
</view>
</view>
.js
data: {
list: [
{ id: , name: , checked: false },
{ id: , name: , checked: false },
{ id: , name: , checked: false },
{ id: , name: , checked: false },
],
selectilall:false
},
//单选
select: function (e) {
let selectValue = e.currentTarget.dataset.name
let index = e.currentTarget.dataset.index;
let list = this.data.list
let newli = 'list[' + index + '].checked';
this.setData({
[newli]: !this.data.list[index].checked
})
//let li2 = this.data.list[index].checked
//if (li2 == false) {
// for (let i in this.data.select) {
// if (this.data.select[i] == selectValue) {
//this.data.select.splice(i, 1);
//}
// }
//} else {
//this.data.select.push(selectValue);
//}
console.log(this.data.select)
},
//全选,取消全选
selectAll: function (e) {
let list = this.data.list;
let selectilall = this.data.selectilall;
if (selectilall==false){
for (let i = 0; i < list.length; i++) {
let newli = 'list[' + i + '].checked';
//carts[i].selected = this.data.selectedAllStatus;
//this.data.select.push(this.data.list[i].id);
this.setData({
//[newli]: !this.data.list[i].checked
[newli]: true,
selectilall: true
})
}
}else{
for (let i = 0; i < list.length; i++) {
let newli = 'list[' + i + '].checked';
//carts[i].selected = this.data.selectedAllStatus;
//this.data.select.push(this.data.list[i].id);
this.setData({
//[newli]: !this.data.list[i].checked
[newli]: false,
selectilall: false
})
}
} console.log(list);
},
微信小程序全选多选效果的更多相关文章
- 微信小程序实现标签页滑块效果
微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...
- 微信小程序里实现跑马灯效果
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...
- 微信小程序全选,微信小程序checkbox,微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
- 微信小程序实现“鲜肉APP”首页效果
项目地址http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master 如果您觉得不错,记得给一个star 由于微信小程序目前是当下趋势,正好昨天弄 ...
- 微信小程序实现左滑删除效果(原生/uni-app)
实现效果 列表中侧滑删除 删除不同时存在 scrollview上下滑动与侧滑删除不影响 uni-app实现 html部分 <template> <scroll-view :scrol ...
- 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)
(一)单选按钮组 模型图如下: index.js Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ i ...
- 微信小程序组件 自定义多选
<view class='back'></view> <view class="container"> <!-- 睡眠记录 --> ...
- 微信小程序播放视频发送弹幕效果
首先.先来看一下效果图 然后.再看一下官方文档API对video的说明 相关属性解析: danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 contr ...
- 微信小程序通讯录首字母索引效果,车辆品牌选择列表
效果图: wxml代码: <block wx:for="{{list}}"> <view class='letter' id="letter{{inde ...
随机推荐
- ubuntu17.04安装flash
因为用不了软件商店(别问我为什么) 所以手动安装 1 下载文件 在firefox下下载 *****.tar.gz 压缩包 ,并解压(一般目录在 /home 当前用户下的 下载目录下) adobe官网 ...
- hadoop下HDFS基本命令使用
前提:启动hadoop 1. 查看hdfs下 " / " 的目录 hdfs dfs -ls / 2. 创建文件夹(在 " / " 创建hadoop文件夹) hd ...
- 关于Unity中的UGUI优化,你可能遇到这些问题
https://blog.uwa4d.com/archives/QA_UGUI-1.html 关于Unity中的UGUI优化,你可能遇到这些问题 作者:admin / 时间:2016年11月08日 / ...
- python的发音
我一直读的是:拍方(可能是受有道词典发音的影响了~),可是别人都听不懂,他们大多是读的拍森. 来看看下面这个小伙伴的解释,感觉他说的挺好: “θ”这个字符的发音,有 80% 的中国人(学英文的人)都读 ...
- jzoj4918. 【GDOI2017模拟12.9】最近公共祖先 (树链剖分+线段树)
题面 题解 首先,点变黑的过程是不可逆的,黑化了就再也洗不白了 其次,对于\(v\)的祖先\(rt\),\(rt\)能用来更新答案当且仅当\(sz_{rt}>sz_{x}\),其中\(sz\)表 ...
- P3356 火星探险问题
\(\color{#0066ff}{题目描述}\) 火星探险队的登陆舱将在火星表面着陆,登陆舱内有多部障碍物探测车.登陆舱着陆后,探测车将离开登陆舱向先期到达的传送器方向移动.探测车在移动中还必须采集 ...
- P4012 深海机器人问题
\(\color{#0066ff}{题目描述}\) 深海资源考察探险队的潜艇将到达深海的海底进行科学考察. 潜艇内有多个深海机器人.潜艇到达深海海底后,深海机器人将离开潜艇向预定目标移动. 深海机器人 ...
- NOIP后省选集训前文化课划水记
划水划了一个多月,文化课没啥长进还他妈累死了...--ghj1222 11.11(NOIP Day2) 师傅开车开得很快,晚上8:00多就到了二狱 晚上听毒瘤班主任swh讲了半节语文,我:黑人问号.j ...
- MYSQL生成两个日期之间的所有日期数据
set @i = -1; set @sql = repeat(" select 1 union all",-datediff('2021-01-01','2030-12-31')+ ...
- spark Failed to get database default, returning NoSuchObjectException
解决方法:1)Copy winutils.exe from here(https://github.com/steveloughran/winutils/tree/master/hadoop-2.6. ...