页面要实现的效果图:
开始静态页面是写了二层数组的遍历渲染方式,想偷懒就将数据进行处理(这里是小程序):
wxml:页面用到了一些组件方法,这里不说这个,主要说渲染此类数据的方式,重点的dom代码在“回复盒子”下面
<view class="consultBox" wx:for="{{consultList}}" wx:key="{{index}}">
<view>
<image src="{{item.userAvatar}}"></image>
</view>
<view>
<view class="co-up">
<view>
<text>{{item.userNickName}}</text>
<text>{{item.createTime}}</text>
</view>
</view>
<view class="co-down" wx:if="{{commentsHid && item.content.length > 20}}">
{{(textUtil.substring(item.content, 0, 20) + '...')}}
<text bindtap="palyMore">展开更多</text>
<van-icon name="arrow-down" size="18rpx" color="#6DB2ED" />
</view>
<view class="co-down" wx:if="{{!commentsHid && item.content.length > 20}}">
{{item.content}}
</view>
<view class="co-down" wx:if="{{item.content.length<20}}">
{{item.content}}
</view>
<view class="consultsCounts">
<view bindtap="commentingDisplayTwo" id="{{item.id}}">
<van-icon name="comment-o" />
<text>{{item.children.length> 0?item.children.length:'0'}}</text>
</view>
<view catchtap="favor" id="{{item.code}}" data-state="{{item.isFavor}}">
<van-icon name="good-job-o" color="{{item.isFavor==false?'':'#B40000'}}" />
<text>{{item.favorNum}}</text>
</view>
</view>
<!-- 回复盒子 -->
<view class="replyBox" wx:if="{{item.children && item.children.length > 0}}">
<view class="replyListBox" wx:for="{{item.children}}" wx:for-item="replyList" wx:key="{{index}}">
<text>{{replyList.userNickName}}回复{{replyList.beReplyName}}:</text>
<text bindtap="commentingDisplayTwo" id="{{replyList.id}}">{{replyList.content}}</text>
</view>
</view>
</view>
js数据处理:
this.setData({
consultList: res.data
})
// 递归出所有子集评论
res.data.map((item,index) => {
if (item.hasChild) {
item.children.map((item) => { // 从第三层开始
this.chooseChild(item, index)
})
}
})
chooseChild (box, index) { // 收集回复子集方法
if (!box.hasChild) {
return false
} else {
box.children.map((item) => {
this.data.consultList[index].children.push({
userNickName: item.userNickName,
beReplyName: item.beReplyName,
content: item.content,
id: item.id
})
this.chooseChild(item, index)
})
this.setData({
consultList: this.data.consultList,
})
}
},
下次记录怎么使用小程序模板遍历树形数据的方式0.0