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

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. 循环结构 : while .. for

    # ###循环结构 : while .. for ''' while 循环 可以提高代码的效率,减少代码的冗余 while 条件表达式: code1 code2 如果条件表达式成立,返回True , ...

  2. iOS聊天客服功能(Udesk)

    前言: 在商城或者需要用户和平台交流的APP中需要用到客服功能.接下来会讲解Udesk客服功能的实现.技术文档在Udesk官网可以看到,本文讲述在项目中的集成实现流程.客服使用的PC端交流工具账号在公 ...

  3. JAVA项目中文件重命名方式

    可以直接改类名,之后eclipse会报错: 点击×号会给出解决方案: 注意:不能通过右击servlet文件直接重命名.否则运行之后程序会报错(文件路径不对之类的)

  4. Sql题面试题

    哪位大神会此题,请给出答案,十分感谢! 哪位大神会此题,请给出答案,十分感谢!

  5. Xamarin 自定义 ToolbarItem 溢出菜单实现(Popover/Popup) 弹出下拉效果

    使用  Rg.Plugins.Popup 插件 1.  新建 PopupMenu.xaml <?xml version="1.0" encoding="utf-8& ...

  6. dedecms二次开发

    安装遇到的问题 修改文件如下 1.date目录下的config.cache.bak.php改成config.cache.php 2install目录下的index.html.install_lock. ...

  7. c#中WebApi开发遇到的坑

    一.如何新建一个webApi项目 打开VS→找到解决方案→新建项目→类库或web应用程序→选择空的WebApi项目→在Global.asax文件的Application_Start方法中注册WebAp ...

  8. https----------如何在phpstudy环境下配置apache的https访问以及访问http自动跳转成https

    1.首先在 httpd.conf里面修改几个地方 找到 #LoadModule ssl_module modules/mod_ssl.so 去掉前面的# Include conf/vhosts.con ...

  9. (.NET高级课程笔记)反射总结

    反射总结 1.dll-IL-matadata-反射 2.反射加载dll,获取module.类.方法.特性 3.反射创建对象:反射+简单工厂+配置文件 4.反射调用实例方法.静态方法.重载方法.私有方法 ...

  10. 【论文速读】Sheng Zhang_AAAI2018_Feature Enhancement Network_A Refined Scene Text Detector

    Sheng Zhang_AAAI2018_Feature Enhancement Network_A Refined Scene Text Detector 作者 关键词 文字检测.水平文字.Fast ...