如果要在微信小程序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>