微信小程序点击列表添加 去除属性
首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式
wxml:
<view>
<view wx:for="{{list}}" wx:key="num" class="list" >
<text bindtap='changColor' data-index='{{index}}' class='{{item.check?"text-active":""}}' >| {{item.message}}</text>
</view>
</view>
js:
/*
这里获取list是一个数组对象
*/
changColor: function (e) {
let index = e.currentTarget.dataset.index
let arrs = this.data.list;
if (arrs[index].check == false) {
arrs[index].check = true;
} else {
arrs[index].check = false;
}
this.setData({
list: arrs
})
},
核心在于修改对象属性check的值,然后在元素渲染是根据值进行样式的添加
微信小程序点击列表添加 去除属性的更多相关文章
- 微信小程序新闻信息列表展示
微信小程序信息展示列表 wxml <!-- 轮播图 --> <view class='haibao' bindtap="seeDetail" id="{ ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 微信小程序开发-新闻列表之新闻列表绑定
微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...
- 微信小程序信息展示列表
微信小程序信息展示列表 效果展示: 代码展示: wxml <view class="head"> <view class="head_item" ...
- 基于微信小程序的用户列表点赞功能
代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...
- 微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...
- 图解微信小程序---获取电影列表
图解微信小程序---获取电影列表 代码笔记 list跳转 第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console Log的方式获取我们电影的相关数据字段,后 ...
- 微信小程序,我的英雄列表
最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 1.下载微信开发者工具 官网链接:https://mp.weixin.qq. ...
- 微信小程序 - 展开收缩列表
代码源自于:微信小程序示例官方 index.wxml <block wx:for-items="{{list}}" wx:key="{{item.id}}" ...
随机推荐
- SQL SERVER-时间戳(timestamp)与时间格式(datetime)互相转换
SQL里面有个DATEADD的函数.时间戳就是一个从1970-01-01 08:00:00到时间的相隔的秒数.所以只要把这个时间戳加上1970-01-01 08:00:00这个时间就可以得到你想要的时 ...
- Spark SQL 编程初级实践
一.实验目的 (1) 通过实验掌握 Spark SQL 的基本编程方法: (2) 熟悉 RDD 到 DataFrame 的转化方法: (3) 熟悉利用 Spark ...
- OO第二单元总结(多线程的电梯调度)
经过第一单元作业的训练,在做第二单元的作业的时候,要更加的有条理.但是第二次作业多线程的运行,带来了更多的运行的不确定性.呈现出来就是程序会出现由于线程安全问题带来的不可复现的bug.本单元的作业也让 ...
- 使用Apache JMeter对SQL Server、Mysql、Oracle压力测试(四)
这篇文章是对前面三篇的一个总结: 1.从测试结果来看,原生的数据库性能分别是:SQL Server(4587)>Oracle(271)>Mysql(145),测试数据量分别为5W.50W. ...
- 使用MyEclipse新建maven项目时报An internal error occurred during: "Retrieving archetypes:". GC overhead limit
前几天在上手maven时,遇到了一个十分头疼的问题,我的myeclipse配置的是自己安装的插件 ,总是报 " An internal error occurred during: &quo ...
- IntelliJ IDEA安装scala插件并创建scala示例
1.http://blog.csdn.net/a2011480169/article/details/52712421 2.http://blog.csdn.net/stark_summer/arti ...
- C# 读取xml——XmlReader和XElement
1.有些xml文件头部有DTD,程序解析的时候会报错 如:其他信息: 打开外部 DTD“file:///E:/PM数据/MeContext=CDF2775/MeasDataCollection.dtd ...
- ACM-ICPC 2018 南京赛区网络预赛(A, J)
A 签到题 Alice, a student of grade 666, is thinking about an Olympian Math problem, but she feels so d ...
- 【转】Install Win32 OpenSSH (test release)
Openssh download url:https://github.com/PowerShell/Win32-OpenSSH/releases Install instruction: Insta ...
- 对象序列化Serializable
一.Java对象的存储 首先我们先来理解一下Java对象在内存中的存储! JVM的内存分为三个部分:栈(stack).堆栈(heap).方法区(method area): 栈:主要存储基本数据类型变量 ...