【微信小程序】实现根据某一属性值分类渲染数组内容

需求与效果

实现根据某一属性值分类渲染数组，需求是：
数组如下，渲染在页面上时，根据p_num值进行分组渲染，p_num相同的放在同一容器里，容器外包裹边框。

array: [
{content: "内容1", id: "1", p_num: "1"},
{content: "内容2", id: "2", p_num: "1"},
{content: "内容3", id: "3", p_num: "2"},
{content: "内容4", id: "4", p_num: "2"},
{content: "内容5", id: "5", p_num: "3"},
{content: "内容6", id: "6", p_num: "3"}
]

效果：

实现

wxml

<view wx:for="{{pNums}}" wx:for-item="pNum">
  <view class="box">
    <view class="border">
      <view wx:for="{{array}}" wx:for-item="item" wx:if="{{item.p_num == pNum && !renderedPNums[pNum]}}">
        <view>{{item.content}}</view>
      </view>
      <view wx:if="{{!renderedPNums[pNum]}}" hidden="{{true}}" bindtap="setRenderedPNums" data-value="{{pNum}}"></view>
    </view>
  </view>
</view>

js

const app = getApp()
Page({
data: {
array: [], // 数组
pNums: [], // 所有的p_num值
renderedPNums: {} // 已经渲染过的p_num值
},
onLoad: function() {
// 初始化数组
this.setData({
array: [
{content: "内容1", id: "1", p_num: "1"},
{content: "内容2", id: "2", p_num: "1"},
{content: "内容3", id: "3", p_num: "2"},
{content: "内容4", id: "4", p_num: "2"},
{content: "内容5", id: "5", p_num: "3"},
{content: "内容6", id: "6", p_num: "3"}
]
})
// 获取所有的p_num值
let pNums = [];
for (let i = 0; i < this.data.array.length; i++) {
if (!pNums.includes(this.data.array[i].p_num)) {
pNums.push(this.data.array[i].p_num);
}
}
console.log(pNums)
this.setData({
pNums: pNums
})
},
// 更新已经渲染过的p_num值
setRenderedPNums: function(e) {
let p_num = e.target.dataset.value;
let renderedPNums = this.data.renderedPNums;
renderedPNums[p_num] = true;
this.setData({
renderedPNums: renderedPNums
})
}
})

wxss

.box {
  margin-top: 20rpx;
}

.border {
  border: 1rpx solid #ccc;
  padding: 20rpx;
}

参考

chatgpt