微信小程序全选多选效果
效果图:
代码:
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 ...
随机推荐
- gRPC官方文档(异步基础: C++)
文章来自gRPC 官方文档中文版 异步基础: C++ 本教程介绍如何使用 C++ 的 gRPC 异步/非阻塞 API 去实现简单的服务器和客户端.假设你已经熟悉实现同步 gRPC 代码,如gRPC 基 ...
- Python3下的paramiko模块
paramiko模块是基于Python实现的SSH远程安全连接,用于SSH远程执行命令.文件传输等功能. 默认Python没有,需要手动安装:pip install paramiko SSH密码认证远 ...
- 解释器模式Interpreter详解
原文链接:https://www.cnblogs.com/java-my-life/archive/2012/06/19/2552617.html 在阎宏博士的<JAVA与模式>一书中开头 ...
- 老男孩Day6作业:计算器
作业需求: 1.实现加减乘除及拓号优先级解析 2.用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) ...
- [比赛|考试]nowcoder NOIPpj组第二场
nowcoder NOIPpj组第二场 370pts/400pts(100,100,100,70) rank3 给自己的反思:前3题都A了,T4O(N^2)不会就是不会(没准是我懒得推了),DP了70 ...
- CF431D Random Task 二分+数位dp
One day, after a difficult lecture a diligent student Sasha saw a graffitied desk in the classroom. ...
- gitflow工作流简介
gitflow工作流是一种依赖于Git版本管理工具,按特定规范对项目开发.测试.上线流程进行管理的工作方式.它是一种为实现规范化管理的约定,它明确了各个分支的意义,使整个团队的分工协作更加和谐明晰. ...
- Oracle 11G R2在用EXP 导出时,空表不能导出解决办法
11G中有个新特性,当表无数据时,不分配segment,以节省空间 解决方法: 1.insert一行,再rollback就产生segment了. 该方法是在在空表中插入数据,再删除,则产生segmen ...
- Django 解答 01 (pycharm创建项目)
pycharm创建项目 1. 2. 3.Tools --->Deployment--->Options 这一条由always 改为 On explicit save action(Ctrl ...
- #333 Div2 Problem B Approximating a Constant Range(尺取法)
题目:http://codeforces.com/contest/602/problem/B 题意 :给出一个含有 n 个数的区间,要求找出一个最大的连续子区间使得这个子区间的最大值和最小值的差值不超 ...