微信小程序 wx:for 遍历 Map集合

本文主要是介绍微信小程序 wx:for 遍历 Map集合，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

这篇关于微信小程序 wx:for 遍历 Map集合的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！