微信小程序循环数组展示数据点击当前改变当前按钮状态
2024-10-21 18:42:13
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
})
},
最新文章
- C#调用百度地图 api
- [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据
- KBMMW 4.90.00 发布
- Intent官方教程(6)常见Intent示例,启动日历,时钟,镜头等。
- Utility
- 页面 Backspace 功能禁锢
- 对C#调用C++ dll文件进行总结
- REST API TESTING
- 判断ios是app第一次启动
- Spring 3 MVC: Themes In Spring-Tutorial With Example---reference
- 用NPOI导出Excel,生成下拉列表、以及下拉联动列表(第1篇/共3篇)
- centos7系统优化定制
- HDU 2516 斐波那契博弈
- 网页中顶部banner图自适应css
- Shell中read命令--学习
- C# 从后台代码同步或异步注册Javascript到页面之RegisterStartupScript和RegisterClientScriptBlock的区别
- 内存管理与正则(re)模块
- Python中的异常(Exception)处理
- cxGrid显示行号
- Android通过php插入查询SQL数据库
热门文章
- LeetCode-2055 蜡烛之间的盘子 及库函数 lower_bound 和 upper_bound学习使用
- url 获取 值
- C# DevExpress GridControl下动态创建列的方法
- docker swarm集群安装使用
- Hadoop搭建超级详解
- appium:报错Message: Message: Parameters were incorrect. We wanted {";required";:[";value";]}
- Win+R 常用命令
- VS/QT--调用第三方库dll总结
- shell脚本实战笔录-在PATH中查找程序
- 搭建 springboot 应用