微信小程序点击列表添加 去除属性
首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式
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}}" ...
随机推荐
- C#博客目录
基础加强 1.索引器 2.密闭类.静态类及扩展方法 3.值.引用类型及结构体 4.秒懂IL.CTS.CLS和CLR 5.装箱与拆箱 6.引用相等与运算符重载 7.ref与out 8.委托和事件 9.对 ...
- Oracle数据库自带表或者视图
dba_开头 dba_users 数据库用户信息 dba_segments 表段信息 dba_extents 数据区信息 dba_objects 数据库对象信息 dba_tablespaces 数据库 ...
- 2019年新软件发布分享HanGi.IT.AStrutTie.v2017 1CD
Steelray Project Viewer 2019.1.69 1CDIAR Embedded Workbench for Renesas M16C-R8C v3.71.1 1CD Mentor ...
- Navicat for MySQL下载安装和破解教程
1.进https://navicatformysql.en.softonic.com/官网 2.第二步 3.第三步等待下载完成 4.第四步双击 二,破解 1.链接:https://pan.baidu. ...
- 爬虫---爬虫er与反爬虫er之间的斗争 转发
转自:昵称:python修行路 https://www.cnblogs.com/zhaof/p/7326260.html
- 【原创】canvas裁剪上传图片异步提交
<!DOCTYPE html> canvas裁剪图片,纯前端 裁剪文件 后台返回获取裁剪后的文件
- orcl数据库锁等级研究小记
上周通过orcl 悲观锁的方式解决了一个并发临界值的问题.现在来研究下orcl各中锁的机制以及如何手动释放锁. 首先,通过查阅资料,先了解下数据的的各种操作语言分类. SQL语言共分为四大类:数据查询 ...
- (转载)WinRAR离购买许可只剩x天
在WinRAR的安装目录下,新建文件RarReg.key(C:\Program Files\WinRAR\RarReg.key) 粘贴以下内容即可: RAR registration dataFede ...
- python之堡垒机(第九天)
本节作业: 通过使用paramiko和sqlalchemy实现堡垒机功能 主要功能实现: 1.用户登录堡垒机后,无需知道密码或密钥可以SSH登录远端服务器: 2.用户对一个组内所有主机批量执行指定命令 ...
- 2017-2018-2 20155228 《网络对抗技术》 实验五:MSF基础应用
2017-2018-2 20155228 <网络对抗技术> 实验五:MSF基础应用 1. 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需 ...