树形结构的数据渲染问题(下面是个类似朋友圈回复的渲染)

页面要实现的效果图:
在这里插入图片描述
开始静态页面是写了二层数组的遍历渲染方式,想偷懒就将数据进行处理(这里是小程序):
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

发布了17 篇原创文章 · 获赞 0 · 访问量 193
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览