Html:

<view class="container" wx:for="{{arr}}" wx:key="*"> //这里循环数组
<view class="content">{{item.content}}</view>
<view class="btn">
<image src="../../images/me.png" wx:if="{{item.status==true}}" data-index="{{index}}" bindtap="statusClick"></image>
<image src="../../images/me1.png" wx:if="{{item.status==false}}" data-index="{{index}}" bindtap="statusClick"></image>
</view>
</view>
 
Css:

.container {padding: 0 30rpx; box-sizing: border-box; height: 200rpx;}
.content{display: inline-block; width: 70%; height: 200rpx; line-height: 200rpx;}
.btn {display: inline-block; width: 30%; height: 200rpx; line-height: 200rpx; text-align: center;}
.btn image {width: 40rpx; height: 40rpx;}
 
 
Js:

data: {
arr: [{
content: "我的老哥",
status: true
}, {
content: "我的老弟",
status: true
}, {
content: "我的老妹",
status: true
}, ]
},
statusClick: function(e) {
var arr = this.data.arr; //声明的数组
var index = e.currentTarget.dataset.index; //当前数组的索引下标
if (arr[index].status == true) { //如果当前数组下标的状态为true
arr[index].status = false; //将false赋给当前数组的下标
} else { //反之
arr[index].status = true;
}
 
this.setData({
arr: arr
})
},

微信小程序循环数组展示数据点击当前改变当前按钮状态的更多相关文章

  1. 微信小程序滚动动画,点击事件及评分星星制作!

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

  2. 微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理

    前言: 小程序开发中诸如获取用户手机号码.调起微信支付.领取卡券等api都是会有一定的延迟的.也就是说通过点击按钮调用这些api的时候,从点击按钮调用api,到支付页面或者领取卡券界面展示出来是需要一 ...

  3. 微信小程序中,如何点击链接跳转到外部网页

    跳转到内部链接 这个我们应该都知道,通过wx.navigateTo,wx.redirectTo,wx.swtichTab等小程序内部的方法,可以直接跳转到小程序内部已经注册的(就是在app.json中 ...

  4. 微信小程序组件解读和分析:七、button按钮

    button按钮组件说明: button,顾名思义,按钮,类似于html的button标签.我们可以设置按钮的属性,比如字体颜色大小,背景颜色等,可以给按钮绑定事件,用户点击时会触发事件. butto ...

  5. 微信小程序 Button控件 点击传值给JavaScript

    直接看例子吧: WXML:直接看Button,用“data-”(data-total)传值,后台如何获取,继续看下面JS代码. <view class="infothird" ...

  6. 微信小程序 循环列表添加点击事件和样式

    如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使 ...

  7. 微信小程序组件 分页菜单点击请求

    //JS data: { navNum:0, navList: [ { id: 1, name: '已预约' }, { id: 2, name: '已消费' }, { id: 3, name: '已取 ...

  8. 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

    异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...

  9. 微信小程序开发初体验--教你开发小程序

    微信小程序 微信小程序面世以来受到的关注颇多,直到最近我才动手尝试进行了小程序的开发,总体上感觉还是不错的,有一点不适应的就是要摆脱Web APP开发对DOM的操作.在这里我就把我是如何利用API开发 ...

  10. 微信小程序源码推荐

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

随机推荐

  1. .netcore全局异常处理

    一.背景 某天,应用程序进程无缘无故退出,也就是我们通常说的崩溃.通常情况下,windows事件会记录一条消息.但是有时候,我们发现这样的信息,对于查找问题,还是远远不够的,因为它说RunTime报错 ...

  2. [WinError 10061] 由于目标计算机积极拒绝,无法连接。- EnlightenGan运行

    在测试EnlightenGan时,可视化结果保存出现问题. 原因:调用visdom可视化,需要先打开visdom python -m visdom.server

  3. scrapy 爬取酷狗热门歌手音乐

    目录 声明 Hello,酷狗! 创建一个Scrapy项目 spider模块 分析前端界面 注意 items模块 pipeline模块 处理音频文件自定义下载路径 自定义下载图片路径 异步存入到数据库 ...

  4. SAP MD04屏幕显示增强

    需求 在看物料MRP结果的时候,业务人员想要看到工单批次,工单批次是我们这边工单下达后传输到其他系统,然后由其他系统回传回来的. 开发步骤 主要使用二代增强出口:M61X0002 创建增强项目 事务码 ...

  5. CentOS 镜像官网下载链接

    CentOS 镜像官网下载链接: https://www.centos.org/download/mirrors/ http://mirrors.aliyun.com/centos/ https:// ...

  6. JS 替代eval方法

  7. 02.java基础(一)java的基础、方法和数组

    目录 Java基础 Java特性 Java程序运行机制 Java基础语法 1.数据类型 基本类型 引用类型 数据类型扩展 String类型内存分配过程 转义字符 类型转换 变量 常量 2.运算符 逻辑 ...

  8. HCIP-进阶实验03-网络流量路径控制

    HCIP-进阶实验03-网络流量路径控制 实验需求 某城域网网络环境部署规划如图所示,该网络通过OSPF协议进行部署设计,分为四个区域,分别为骨干区域0.普通区域1.2.3.其中普通区域1为特殊区域N ...

  9. 如何在eclipse里的动态Web项目建立后缀为xml的文件

    1.右击Dynamic Web Project类型项目的WEB-INF->new->Other->XML,选择XML File2 点击next改名字为web(后缀不要动哦)3. 点击 ...

  10. uniapp打包h5

    1. 找到项目中 manifest.json --- H5 配置---运行时的基础路径, 将路径修改为 相对路径(./ ) 注意: 1.运行的基础路径系统默认打包路径为绝对路径,如不改,打包时找不到对 ...