思路:把向得到的数组中添加一个布尔值,默认都为false,然后通过数组的映射功能把选中的布尔值,存储到数组中,在组件属性中,用三元运算符做判断即可

data:{

sampleArray: [{ id: '0001'}, { id: '0002'}, { id: '0003'}, { id: '0004'}], //样品数组

}

js代码:

//页面加载的时候执行

onLoad(){
let {sampleArray } = this.data;
sampleArray.forEach(x => {
x.selected = false
})
},
//选中数据是执行
select(e){
let that=this;
let { index}=e.currentTarget.dataset;
let currentItem = this.data.sampleArray[index];
let { selectSample}=this.data;
currentItem.select = !currentItem.select
selectSample.concat(selectSample.push(index));
let newArray=selectSample.filter((val,index,arr)=>{
return arr.indexOf(val)==index
})
console.log(newArray)
this.setData({
sampleArray: that.data.sampleArray,
selectSample
})
},
wxml代码:

<image class="select" src="{{item.select?'/images/zx1.png':'/images/xz2.png'}}"></image>

微信小程序之多选功能的更多相关文章

  1. 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

    微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...

  2. 微信小程序产品定位及功能介绍

    产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq ...

  3. 让你的微信小程序具有在线支付功能

    前言 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过 ...

  4. (三)微信小程序首页的分类功能和搜索功能的实现笔记

    就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...

  5. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  6. 微信小程序开发平台新功能「云开发」快速上手体验

    微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...

  7. 微信小程序实现多选分享

    微信小程序拉取好友列表后,默认只能选一个分享,现在在分享回调onShareAppMessage里加上这段代码,拉取好友列表时,右上角会出现多选按钮,这样就解决了微信小程序安卓下只能单选分享的问题. / ...

  8. 微信小程序又一爆炸功能上线-云开发

    云开发介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开 ...

  9. 微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是c ...

随机推荐

  1. idea使用教程-常用设置

    [1]进入设置: [2]设置主题: [3]编辑区的字体变大或者变小: [4]鼠标悬浮在代码上有提示: [5]自动导包和优化多余的包: 手动导包:快捷键:alt+enter 自动导包和优化多余的包: [ ...

  2. Myeclipse查看jdk源代码

    过程如下: 1.点 "window"-> "Preferences" -> "Java" -> "Install ...

  3. 【机器学*】k*邻算法-03

    心得体会: 需要思考如何将现实对象转化为特征向量,设置特征向量时记住鸭子定律1 鸭子定律1 如果走路像鸭子.说话像鸭子.长得像鸭子.啄食也像鸭子,那它肯定就是一只鸭子 事物的外在特征就是事物本质的表现 ...

  4. AlexNet: ImageNet Classification with Deep Convolutional Neural Networks

    目录 激活函数 防止过拟合 增加数据 Dropout 细节 代码 AlexNet 上图是论文的网络的结构图,包括5个卷积层和3个全连接层,作者还特别强调,depth的重要性,少一层结果就会变差,所以这 ...

  5. 后缀树的建立-Ukkonen算法

    参考: Ukkonen算法讲解 Ukkonen算法动画 Ukkonen算法,以字符串abcabxabcd为例,先介绍一下运算过程,最后讨论一些我自己的理解. 需要维护以下三个变量: 当前扫描位置# 三 ...

  6. XML解析的四种方式

    1.说明 XML是EXtensible Markup Language, 即可扩展标记语言, 是一种通用的数据交换格式, 它的平台无关性.语言无关性.系统无关性, 给数据集成与交互带来了极大的方便. ...

  7. 实验 6 :OpenDaylight 实验——OpenDaylight 及 Postman实现流表下发

    实验 6 :OpenDaylight 实验--OpenDaylight 及 Postman实现流表下发 一.实验目的 熟悉 Postman 的使用:熟悉如何使用 OpenDaylight 通过 Pos ...

  8. 下载并搭建maven环境

    1.下载maven 1.在官网下载maven  http://maven.apache.org/download.cgi 2.将下载maven解压.复制路径. 2.搭建maven环境 1.新建M2_H ...

  9. 【从小白到专家】 Istio专题之七:30分钟讲透Istio访问与控制

    本文为Istio系列专题之七--Istio访问与控制.Istio通过身份认证.授权.多重安全策略,来保证微服务的安全,实现代码无侵入性.有时我们需要对微服务间的相互访问进行控制,比如满足某些条件的微服 ...

  10. java基础05-类型转换

    java基础05-类型转换 由于Java是强类型语言,所以要进行有些运算的时候,需要用到类型转换. 低 ---------------------------> 高 byte , short , ...