欢迎来到本网站

全国统一咨询热线:166-2870-3070

新闻中心

新闻中心News Center

联系方式

联系方式Contact infoemation

电话:166-2870-3070

邮箱:support@0707app.com

地址:上海市徐汇区569号数字化创意园1号楼606-607室

当前位置:明翔网络 > 新闻中心 > 微信小程序--循环数组展示数据点击当前改变当前按钮状态

微信小程序--循环数组展示数据点击当前改变当前按钮状态

文章出处:http://www.ucunicom.com/a/835.html 阅读量:16 发表时间:09-14 07:02
新闻中心

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) { //如果当前数组下标的状态为truearr[index].status = false; //将false赋给当前数组的下标} else { //反之arr[index].status = true;}this.setData({arr: arr})},


全国咨询热线:166-2870-3070

二维码

地址:上海市徐汇区569号数字化创意园1号楼606-607室

版权所有 © 1999-2017 Copyright © 1999-2017 All Rights Reserved

no cache
Processed in 0.425405 Second.