微信小程序点击列表添加 去除属性
首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式
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}}" ...
随机推荐
- studio-3t 配置文件位置
换电脑了,原来的studio-3t的配置 在 C:\Users\用户名\.3T. 将这个目录下的所有文件拷贝到 新电脑里的 相同文件夹,覆盖即可
- 正则re
1.简介 其实re在基本模块里已经介绍过,但是在爬虫中re是非常重要的,所以在这里再进行详细描述. re在解析html内容时是效率最高的,但是也是最难的,一般来说,都是结合xpath和re使用,这样解 ...
- MPLS的模拟学习过程
1.场景拓扑 使用小凡模拟器搭建了如下网络拓扑,使用的镜像为:c3640-jk9o3s-mz.122-15.T9.bin 相关的配置在下方 如果重复实验,需要清空设备的配置,知道路由器的密码,操作步骤 ...
- if __name__ == '__main__' 这段代码怎么理解???
__name__是内置变量,可用于表示当前模块的名字,而“__main__”等于当前执行文件的名称. 两个名称搞不清没关系,往下看待会解释 对很多编程语言来说,程序都需要一个入口,例如C系列.Java ...
- vue评论显示隐藏,JavaScript显示关闭
<template> <div id="vue_det"> <h1>{{details()}}</h1> <div>{{ ...
- Delphi获取本机所有的IP
安装Indy uses IdStackWindows; var Isw:TIdStackWindows; slist:TStringList; begin Isw:=TIdStackWindows. ...
- SQL kaggle learn : WHERE AND
WHERE trip_start_timestamp Between '2017-01-01' And '2017-07-01' and trip_seconds > 0 and trip_mi ...
- Hadoop Mapreduce 调优
- 1.字符串操作:& 2.英文词频统计预处理
1.字符串操作: 解析身份证号:生日.性别.出生地等. ID = input('请输入十八位身份证号码: ') if len(ID) == 18: print("你的身份证号码是 " ...
- Node.js建立服务、路径处理与响应
通过Node.js创建一个web服务器,要写的代码可能不是最少的,但是一定是最容易理解的. 用6行代码创建的web服务器 当在浏览器中访问http://127.0.0.1:1337会看到自定义的字样 ...