一维数组的遍历并更改样式

在这里首先在JS中创建一个一维数组还有一个旗子：

data: {choose_items: ['橙子', '苹果', '香蕉', '西瓜', '草莓', '葡萄'],current_item: 0,},

在wxml中遍历数组：

 <view bindtap='clicked' wx:for="{{choose_items}}"
data-key='{{index}}'  class="items {{current_item === index?'selected':' '}}" >{{item}} </view>

得到的效果是这样的

其中样式wxss中稍微给一些样式可以观察到具体效果

.items{width: 100%;height: 100rpx;font-size: 32rpx;text-align: center;line-height: 100rpx;
}
.selected{background-color: #FFAD75;color: #fff;
}

wx:for里面的变量就是对数组choose_items中的每一个元素进行遍历

在文本中绑定一个clicked事件：

clicked: function (e) {var that = this;let index = e.currentTarget.dataset.key;//获取index值console.log(index);that.setData({current_item: index })}

当设置了data-key='{{index}}'时，点击相对应的文本或者区域，所触发的事件我们把它打印出来：

当点击第三个元素时，e.currentTarget.dataset.key就是对应的是数组choose_items中的对应元素的index值

这样的话就可以对应到每一个元素，然后把自己想要的样式进行修改即可。

二维数组的遍历并更改样式

同样的，用一个数组来表示

two_items: [{id: 0,date: '2019年4月18日',events: [{id: 0,detail: '吃饭'},{id: 1,detail: '学习'},{id: 2,detail: '吃饭'},{id: 3,detail: '睡觉'}]},{id: 1,date: '2019年4月19日',events: [{id: 0,detail: '吃饭'},{id: 1,detail: '学习'},{id: 2,detail: '吃饭'},{id: 3,detail: '睡觉'}]},{id: 2,date: '2019年4月20日',events: [{id: 0,detail: '吃饭'},{id: 1,detail: '学习'},{id: 2,detail: '吃饭'},{id: 3,detail: '睡觉'}]}],

如果按照index单个数据来获取的话，那么就会有多个结果，导致答案不唯一了，就如下面错误的做法：

<view class='item' wx:for="{{two_items}}" wx:key='{{index}}'><view class="items {{current_item === index?'selected':' '}}" data-key='{{item.id}}' wx:for="{{item.events}}" wx:key='{{index}}' bindtap='clicked' wx:for-item="twodata"> {{twodata.detail}}</view>
</view>

所以需要变通，这里可以用一个二维的思想表示一个字符串：

<view class='item' wx:for="{{two_items}}" wx:key='{{index}}'><view class='cc' data-key='{{item.id + "-" + twodata.id }}' wx:for="{{item.events}}" wx:key='{{index}}' bindtap='clicked' wx:for-item="twodata"> <view class='{{current_item === item.id + "-" + twodata.id?"selected":"items"}}'>{{twodata.detail}}</view></view>
</view>

打印出来的key值为：

这样结果就是唯一的了。

类似的不管是多少维度的数组都可以用类似的方法解决。

【小程序】wx:for=下对多维数组的遍历，并根据data-key值改变相应的样式相关推荐

小程序wx:if 隐藏显示时频幕闪烁问题
小程序wx:if 隐藏显示时频幕闪烁问题根据后台返回的值判断该显示哪部分该隐藏哪部分页面结构 <view wx:if="{{isInit}}">//返回数组有值显示 ...
微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？小程序支付如何实现
小程序部分常见面试题提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度用户行为预测减少默认data的大小组件化方案分包预下载小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
微信小程序foreach遍历_微信小程序wx:for和wx:for-item的用法
微信小程序wx:for和wx:for-item的用法.兴弘海科技在微信小程序定制开发单门店系统的时候,在制作菜单的时候,需要体现左侧是菜单栏目,右侧是菜单名称列表的时候,遇到wx:for和wx:for ...
企业微信小程序wx.qy.login 的调用调试踩坑
企业微信小程序wx.qy.login 的调用调试踩坑起步在企业微信的开发过程中有很多坑,一切以企业微信开发文档为准. 近期我公司项目需要我联调开发企业微信小程序,以前没开发过,所以一切只能跟着企业 ...
针对小程序wx.getUserProfile接口将被收回后做出的授权调整
小程序文档中提出的调整说明调整说明: 自 2022 年 10 月 25 日 24 时后(以下统称 "生效期" ),用户头像昵称获取规则将进行如下调整: 自生效期起,小程序 wx. ...
微信小程序wx.switchTab
[转]关于微信小程序wx.switchTab的问题昨天做了个功能要从首页跳到tabBar页,并且要带上参数.首先我是这样做的: 在index.js中: toCategory:function(eve ...
小程序wx.requestPayment报错/无响应信息梳理
大风起兮云飞扬,安得猛士兮走四方,BUG,任何时候都要改,不改不行,你想想,你自己一个人,下了班,吃着火锅还唱着歌,突然支付就不能用了! 本文整理了关于微信小程序wx.requestPayment的报 ...

【小程序】wx:for=下对多维数组的遍历，并根据data-key值改变相应的样式

一维数组的遍历并更改样式

二维数组的遍历并更改样式

【小程序】wx:for=下对多维数组的遍历，并根据data-key值改变相应的样式相关推荐

最新文章

热门文章