内容概述

Alright！我们的评论展示功能已经实现了，但是作为一个两层结构的评论，还有一件事我们需要实现：查看回复

逻辑实现

js代码如下：

viewReplies:function(e){
    let that = this
    let index = e.currentTarget.dataset.index 
    wx.request({
      url: 'http://localhost:11000/api/comment?parentId='+e.currentTarget.dataset.id,
      menthod:'get',
      header: {
        'content-type': 'application/json', // 默认值
        'token':u.token
      },
      success(res){
        that.setData({
          ['comment.records['+index+'].children.records'] : that.data.comment.records[index].children.records.concat(res.data.data.records)
        })
      },
      fail(err){
        console.log(err);
      }
    })
  },

其他的尚且没有什么可说的，重点在于如何将获取到的数据附加到指定的父评论下方。

在这里的setData方法内我们不在使用定义对象名的方式接受数据；而是直接将查询到的更多子评论和之前获取到的父评论下的子评论做一个拼接操作。

不过在这个操作执行的过程中会用到一个新知识：传输数据下标

即setData中的index，index的功用即在触发点击事件之后将对应子评论所属下标传输给js文件，然后js文件可以通过使用该下标进行子评论的拼接，将后续读取到的数据拼接到当前下标的评论下边。

要想实现下标的传输，xml代码如下：

<text wx:if="{{item.children && item.children.total > 1 && item.children.total > item.children.records.length }}"   bind:tap="viewReplies" data-id="{{item.id}}" data-index="{{index}}">-查看回复</text>

除了下标的获取 还有一段关键逻辑即当全部的回复评论已经展示完成，则将查看回复文本隐藏。

在这我们需要用到wx:if的一个特性：当wx:if“{{}}”的判断条件为true时，该控件默认显示，反之当判断条件为false时，该控件默认隐藏。

所以在查看回复隐藏与否的问题我们需写入三个逻辑（是否存在子评论 && 子评论的数量是否大于1 && 子评论数量是否大于请求获取并返回的子评论数量），当三个条件都为真我们就能看到查看回复。任有其一不成立我们都无法看到查看回复。