目录
内容综述
本文描述了对回帖的评论进行显示和添加的实现。
一些补充
上一次实现了为某一个帖子添加回帖。实现思路是，点击右下角的按钮，会弹出添加回帖的输入框。例如：
点击加号后，其他回帖没有被盖住：
?这样，仍然可以对其他回帖进行操作，例如删除。这样是不合理的，用户体验不好。当弹出框显示的时候，其他部分应该不能点击。因此，我设计，在弹出框弹出时，应该隐藏其他的部分。所以，我对wxml结构进行了这样的修改：
通过addNewReplyDialogShow变量，控制弹出框是否显示。因此可以再次利用这个变量，给其他部分动态绑定class，即：
?
?
当弹出框显示时，给回帖页面和添加回帖按钮添加一个cover类，而cover类如此实现：
?
这样，当弹出框显示的时候，其他部分就通过visibility:hidden隐藏起来了。而visibility:hidden设置后，该部分绑定的函数就无法生效了，所以其余部分自然不能触发了。实现效果如下：
?
思路
在之前，我已经实现了社区中的帖子、帖子的回帖，我们设计，针对每一条回帖，可以添加评论。因此，现在需要设想对于回帖的评论应该如何展现。
现在回帖的样式：
我设想，当用户没有点击评论按钮时，不需要展示评论；当用户点击时，在每一条回帖下面直接展示出来。所以，需要修改的是Replyitem组件。看到源码：
同样，需要绑定一个变量commentShow，确定评论列表是否要显示。此外，还需要封装一个Comment组件，用来展示每一条评论。接下来，首先需要封装Comment组件。
Comment组件
先看后端接口中，获取帖子的所有回帖接口，每一条回帖的comments就是其评论数组：
观察comments数组，可以看到，每条评论包含了owner（openid）、c2pid（回帖的id）、replyTo（评论的回帖的人的openid）、time（时间）、content（内容）。我可能还需要一个发评论的人的nickname，但是这里没有给出，因此我暂时使用“刘邦”代替。
所以，设计Comment组件的properties包括：
?
搭建结构：
结构比较简单，只显示这几个即可。页面效果如下：
?
这个简单的结构足以封装每一条评论了。接下来，就要在Replyitem组件中应用了。
Replyitem更改
首先，需要在Replyitem.js中添加标志变量，是否显示评论列表：
在页面中设置Comment组件：
?
当commentShow为false的时候，给这个区域添加一个hidden类：
?
设置height为0，overflow为hidden，这样就可以隐藏所有评论了。因此，当评论列表显示的时候效果如下：
?
然后，就应该给评论按钮绑定点击事件，切换commentShow：
给它绑定了showComment函数，实现如下：
?
简单修改commentShow，即可实现评论列表的隐藏和显示。此外，我还给评论按钮的图标设置了动态类，当显示评论时，按钮将变为红色。因此，效果就如上图所示了。
后端还给出了给回帖添加评论的接口：
?
再设想，添加评论的功能能不能在Replyitem组件内完成呢？
按说是可以的，因为我们可以获取到接口要求的所有字段，但必须意识到，添加评论后必须重新获取回帖列表（目前没有根据回帖获取评论的接口，并且就算有也需要通知父组件修改数据），所以，只能在用户触发添加评论的行为后，传递到外面，由父组件Reply页面完成，添加完成后获取回帖。
想清楚这一点，就可以设置添加按钮了。我在Comment组件遍历后设置一个添加按钮：
样式如下：
?
此外，我本来打算自己再次封装一个弹出框，完成评论添加的。但发现，wx.showModal可以与用户交互并输入内容，所以可以通过它完成。那么，可以在handleAddComment函数中，出现一个modal，获取用户想评论的内容。如果内容为空，则不予处理，否则收集数据传递给外面：
到这里，Replyitem组件需要做的已经完成了。
Reply页面完成
Replyitem组件发来了addComment事件，因此需要接收：
实现handleAddComment函数：
收集数据后，我封装了addComment方法，仍然是Promise格式。当添加成功时，会提示用户，并重新获取回帖；否则也会提示用户。addComment方法实现如下：?
?
实现效果：
添加前：
添加中：
?
添加后：
?
效果成功！
总结
本文完成了回帖的评论相关的内容，到这里，除了一些毛刺还没有剔除外，社区的最基本功能已经大体完成了。 接下来，将会完善社区功能，并逐步完成画板功能。
