需求与效果
实现根据某一属性值分类渲染数组，需求是：
数组如下，渲染在页面上时，根据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