已知存在有两个固定写法的API数组(下面)。
其中cat.api里的id值等于post.api里的categories值。需要在前端页面循环显示分类和分类下的文章。第二个循环不知道如何关联写法。请大神们看看
<block wx:key= "id" wx:for= "{{categoriesList}}" > <view class= "list-item" > <view class= "content-title" data-item= "{{item.name}}" data-id= "{{item.id}}" bindtap= "redictIndex" > <view class= "topic-name" > <text>{{item.name}}</text> </view> </view> <view class= "common-list" > <block wx:key= "id" wx:for= "{{postsList}}" > <image src= "{{item.post_medium_image}}" mode= "aspectFill" class= "cover" ></image> <view class= "content-title" > <text>{{item.title.rendered}}</text> </view> </block> </view> </view> </block> |
需要的前端效果:
文章分类cat.api。其中cat.api里的id值等于post.api里的categories值。
[ { "id" : 112, "count" : 7, "description" : "" , "link" : "https://" , "name" : "分类CAT1" , "parent" : 120, "meta" : [], "category_thumbnail_image" : "" }, { "id" : 113, "count" : 0, "description" : "" , "link" : "https://" , "name" : "分类CAT2" , "parent" : 120, "meta" : [], "category_thumbnail_image" : "" }, { "id" : 126, "count" : 4, "description" : "" , "link" : "https://" , "name" : "分类CAT3" , "parent" : 120, "meta" : [], "category_thumbnail_image" : "" , } ] |
文章post.api
[ { "id" : 1134, "date" : "2019-10-08T14:13:41" , "date_gmt" : "2019-10-08T06:13:41" , "type" : "post" , "link" : "" , "title" : { "rendered" : "文章1" }, "excerpt" : { "rendered" : "DESC1" , "protected" : false }, "author" : 1, "categories" : [ 112 ], "post_thumbnail_image" : "https://" , }, { "id" : 1131, "date" : "2019-10-08T14:13:41" , "date_gmt" : "2019-10-08T06:13:41" , "type" : "post" , "link" : "" , "title" : { "rendered" : "文章2" }, "excerpt" : { "rendered" : "DESC2" , "protected" : false }, "author" : 1, "categories" : [ 112 ], "post_thumbnail_image" : "https://" , }, { "id" : 1128, "date" : "2019-10-08T14:13:41" , "date_gmt" : "2019-10-08T06:13:41" , "type" : "post" , "link" : "" , "title" : { "rendered" : "文章3" }, "excerpt" : { "rendered" : "DESC3" , "protected" : false }, "author" : 1, "categories" : [ 113 ], "post_thumbnail_image" : "https://" , }, { "id" : 1125, "date" : "2019-10-08T14:13:41" , "date_gmt" : "2019-10-08T06:13:41" , "type" : "post" , "link" : "" , "title" : { "rendered" : "文章4" }, "excerpt" : { "rendered" : "DESC4" , "protected" : false }, "author" : 1, "categories" : [ 113 ], "post_thumbnail_image" : "https://" , }, { "id" : 1022, "date" : "2019-10-08T14:13:41" , "date_gmt" : "2019-10-08T06:13:41" , "type" : "post" , "link" : "" , "title" : { "rendered" : "文章5" }, "excerpt" : { "rendered" : "DESC5" , "protected" : false }, "author" : 1, "categories" : [ 126 ], "post_thumbnail_image" : "https://" , }, { "id" : 1075, "date" : "2019-10-08T14:13:41" , "date_gmt" : "2019-10-08T06:13:41" , "type" : "post" , "link" : "" , "title" : { "rendered" : "文章6" }, "excerpt" : { "rendered" : "DESC6" , "protected" : false }, "author" : 1, "categories" : [ 126 ], "post_thumbnail_image" : "https://" , } ] |
<view wx:
for
=
'{{categoriesList}}'
>
<view wx:
for
=
'{{postsList}}'
wx:
for
-item=
'item_p'
wx:
if
=
"{{item.id == item_p.categories}}"
>
{{item_p.id}}
</view>
</view>
这样吗?
wx:if判断item1.id=item2.categories
谢谢各位的解答。解决了,代码片段:https://developers.weixin.qq.com/s/RZErN8m77scx
你为什么不先把两个合并成一个,然后一个for不就可以了吗?改变下数据结构不就行了,渲染和逻辑分开
第一重循环中,用wx:for-index保存categories的索引,第二种循环遍历post时,用这个索引来比较cat数组的catid和posd数组的id是否一致,大概如下:
第一重:wx:for=
"{{categoriesList}}" wx:for-index="cat_idx"
第二重:wx:for="{{postList}}"
第二重循环里面判断两个变量相同则显示wx:if("categoriesList[cat_idx].id==postList[index].categories")
写个代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html 你这个太乱了看不懂。