微信小程序点击列表添加 去除属性
首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式
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}}" ...
随机推荐
- BIML 101 - ETL数据清洗 系列 - BIML 快速入门教程 - 连接数据库执行SQL语句
BIML 101 - BIML 快速入门教程 第一节 连接数据库执行SQL语句 本小节将用BIML建一个简单的可以执行的包. 新建一个biml文件,贴入下面的代码 1 <Biml xmlns=& ...
- js添加和删除class
原生主要有三种方法: 1.className var DomClass = document.getElementById("id").className; //删除 pat Do ...
- 微信小程序 下拉加载
在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件. 例: Page({ onPullDownRefresh: function(){ wx.stopPul ...
- PostMessage发送WM_CLOSE消息,实现关闭任意程序
#include <Windows.h> #include <tchar.h> int WINAPI _tWinMain(HINSTANCE hInstance, HINSTA ...
- 关于动态添加iview admin路由以及刷新侧边栏
在main.js中的mounted中使用router.addRouters()方法后界面上的路由并未刷新. 在注释掉路由跳转的权限限制之后,发现直接在地址栏输入对应路由能够进去,只是侧边栏没有刷新. ...
- Web应用启动时,后台自动启动一个线程(转)
原文:http://blog.sina.com.cn/s/blog_6810dfc20101ipzq.html Web应用启动时,后台自动启动一个线程 (1)前言 前几天,manager问道一个问题: ...
- 用Cocos2dx开发棋牌游戏的观点解析
众所周知,目前棋牌游戏特别的火.很多游戏公司都想在这一块赚钱,可是却不知用什么软件比较好的去开发棋牌游戏,对此,我列出了两款比较靠谱的软件去开发棋牌游戏,希望对大家有帮助! 第一款软件是cocos2d ...
- springmvc配置之mvc:annotation-driven
为了简化springmvc配置,spring同时引入了mvc namespace, 配置了 <mvc:annotation-driven/> spring会默认注册a RequestMap ...
- CCF CSP 201409-1 相邻数对
题目链接:http://118.190.20.162/view.page?gpid=T16 问题描述 试题编号: 201409-1 试题名称: 相邻数对 时间限制: 1.0s 内存限制: 256.0M ...
- react context跨组件传递信息
从腾讯课堂看到的一则跨组件传递数据的方法,贴代码: 使用步骤: 1.在产生参数的最顶级组建中,使用childContextTypes静态属性来定义需要放入全局参数的类型 2.在父组件中,提供状态,管理 ...