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

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. BIML 101 - ETL数据清洗 系列 - BIML 快速入门教程 - 连接数据库执行SQL语句

    BIML 101 - BIML 快速入门教程 第一节 连接数据库执行SQL语句 本小节将用BIML建一个简单的可以执行的包. 新建一个biml文件,贴入下面的代码 1 <Biml xmlns=& ...

  2. js添加和删除class

    原生主要有三种方法: 1.className var DomClass = document.getElementById("id").className; //删除 pat Do ...

  3. 微信小程序 下拉加载

    在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件. 例: Page({ onPullDownRefresh: function(){ wx.stopPul ...

  4. PostMessage发送WM_CLOSE消息,实现关闭任意程序

    #include <Windows.h> #include <tchar.h> int WINAPI _tWinMain(HINSTANCE hInstance, HINSTA ...

  5. 关于动态添加iview admin路由以及刷新侧边栏

    在main.js中的mounted中使用router.addRouters()方法后界面上的路由并未刷新. 在注释掉路由跳转的权限限制之后,发现直接在地址栏输入对应路由能够进去,只是侧边栏没有刷新. ...

  6. Web应用启动时,后台自动启动一个线程(转)

    原文:http://blog.sina.com.cn/s/blog_6810dfc20101ipzq.html Web应用启动时,后台自动启动一个线程 (1)前言 前几天,manager问道一个问题: ...

  7. 用Cocos2dx开发棋牌游戏的观点解析

    众所周知,目前棋牌游戏特别的火.很多游戏公司都想在这一块赚钱,可是却不知用什么软件比较好的去开发棋牌游戏,对此,我列出了两款比较靠谱的软件去开发棋牌游戏,希望对大家有帮助! 第一款软件是cocos2d ...

  8. springmvc配置之mvc:annotation-driven

    为了简化springmvc配置,spring同时引入了mvc namespace, 配置了 <mvc:annotation-driven/> spring会默认注册a RequestMap ...

  9. CCF CSP 201409-1 相邻数对

    题目链接:http://118.190.20.162/view.page?gpid=T16 问题描述 试题编号: 201409-1 试题名称: 相邻数对 时间限制: 1.0s 内存限制: 256.0M ...

  10. react context跨组件传递信息

    从腾讯课堂看到的一则跨组件传递数据的方法,贴代码: 使用步骤: 1.在产生参数的最顶级组建中,使用childContextTypes静态属性来定义需要放入全局参数的类型 2.在父组件中,提供状态,管理 ...