首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式

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是一个数组对象
  tomorrow: [
    {
      thing: '吃饭',
      check: false
    },
    {
      thing: '睡觉',
      check: false
    },
    { 
      thing: '打豆豆',
      check: false
    }
  ]
*/
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的值,然后在元素渲染是根据值进行样式的添加

微信小程序点击列表添加 去除属性的更多相关文章

  1. 微信小程序新闻信息列表展示

    微信小程序信息展示列表 wxml <!-- 轮播图 --> <view class='haibao' bindtap="seeDetail" id="{ ...

  2. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  3. 微信小程序开发-新闻列表之新闻列表绑定

    微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...

  4. 微信小程序信息展示列表

    微信小程序信息展示列表 效果展示: 代码展示: wxml <view class="head"> <view class="head_item" ...

  5. 基于微信小程序的用户列表点赞功能

    代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...

  6. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  7. 图解微信小程序---获取电影列表

    图解微信小程序---获取电影列表 代码笔记 list跳转 第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console  Log的方式获取我们电影的相关数据字段,后 ...

  8. 微信小程序,我的英雄列表

    最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 1.下载微信开发者工具 官网链接:https://mp.weixin.qq. ...

  9. 微信小程序 - 展开收缩列表

    代码源自于:微信小程序示例官方 index.wxml <block wx:for-items="{{list}}" wx:key="{{item.id}}" ...

随机推荐

  1. C#博客目录

    基础加强 1.索引器 2.密闭类.静态类及扩展方法 3.值.引用类型及结构体 4.秒懂IL.CTS.CLS和CLR 5.装箱与拆箱 6.引用相等与运算符重载 7.ref与out 8.委托和事件 9.对 ...

  2. Oracle数据库自带表或者视图

    dba_开头 dba_users 数据库用户信息 dba_segments 表段信息 dba_extents 数据区信息 dba_objects 数据库对象信息 dba_tablespaces 数据库 ...

  3. 2019年新软件发布分享HanGi.IT.AStrutTie.v2017 1CD

    Steelray Project Viewer 2019.1.69 1CDIAR Embedded Workbench for Renesas M16C-R8C v3.71.1 1CD Mentor ...

  4. Navicat for MySQL下载安装和破解教程

    1.进https://navicatformysql.en.softonic.com/官网 2.第二步 3.第三步等待下载完成 4.第四步双击 二,破解 1.链接:https://pan.baidu. ...

  5. 爬虫---爬虫er与反爬虫er之间的斗争 转发

    转自:昵称:python修行路 https://www.cnblogs.com/zhaof/p/7326260.html

  6. 【原创】canvas裁剪上传图片异步提交

    <!DOCTYPE html> canvas裁剪图片,纯前端 裁剪文件 后台返回获取裁剪后的文件

  7. orcl数据库锁等级研究小记

    上周通过orcl 悲观锁的方式解决了一个并发临界值的问题.现在来研究下orcl各中锁的机制以及如何手动释放锁. 首先,通过查阅资料,先了解下数据的的各种操作语言分类. SQL语言共分为四大类:数据查询 ...

  8. (转载)WinRAR离购买许可只剩x天

    在WinRAR的安装目录下,新建文件RarReg.key(C:\Program Files\WinRAR\RarReg.key) 粘贴以下内容即可: RAR registration dataFede ...

  9. python之堡垒机(第九天)

    本节作业: 通过使用paramiko和sqlalchemy实现堡垒机功能 主要功能实现: 1.用户登录堡垒机后,无需知道密码或密钥可以SSH登录远端服务器: 2.用户对一个组内所有主机批量执行指定命令 ...

  10. 2017-2018-2 20155228 《网络对抗技术》 实验五:MSF基础应用

    2017-2018-2 20155228 <网络对抗技术> 实验五:MSF基础应用 1. 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需 ...