如果要在微信小程序wxml中对ES6的Map集合进行wx:for遍历,如下:
let map = new Map(); map.set("a",[1,2,3]); map.set("b",[4,5,6]);
//设置page data
......
<view wx:for="{{map}}" wx:key="key" wx:for-index='key'> <view>{{key}}</view> </view>
但始终无法正常遍历输出。
在微信小程序中,要遍历一个对象就简单了,参考上面的代码:
let map ={"a":[1,2,3],"b":[4,5,6]}; //设置page data ......
微信页面遍历
<view wx:for="{{map}}" wx:key="key" wx:for-index='key'> <view>{{key}}</view> </view>
可以正常渲染输出:
a
b
因此将ES6的Map转换为object,再用wx:for遍历渲染输出
/** * Map转换为对象,在微信wxml中实现的wx:for * @param {Map} map * @returns */ mapToObj(map) { let obj = Object.create(null); for (let [k, v] of map) { obj[k] = v; } return obj; } //调用 let testMap = new Map(); map.set("a",[1,2,3]); map.set("b",[4,5,6]); let map = this.mapToObj(testMap); //设置page data .......
微信遍历页面:
<view wx:for="{{map}}" wx:key="key" wx:for-index="key" wx:for-item=''group"> <view>{{key}}</view> <view wx:for="{{group}}" wx:key="*this">>{{item}}</view> </view>
标签:Map,遍历,map,微信,set,let,wx 来源: https://www.cnblogs.com/dw039/p/16305061.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。