创新实训——记录7

目录

内容综述

一些补充

思路

Comment组件

Replyitem更改

Reply页面完成

总结

---

内容综述

本文描述了对回帖的评论进行显示和添加的实现。

一些补充

上一次实现了为某一个帖子添加回帖。实现思路是，点击右下角的按钮，会弹出添加回帖的输入框。例如：

点击加号后，其他回帖没有被盖住：

 这样，仍然可以对其他回帖进行操作，例如删除。这样是不合理的，用户体验不好。当弹出框显示的时候，其他部分应该不能点击。因此，我设计，在弹出框弹出时，应该隐藏其他的部分。所以，我对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方法实现如下： 

 

实现效果：

添加前：

添加中：

 

添加后：

 

效果成功！

总结

本文完成了回帖的评论相关的内容，到这里，除了一些毛刺还没有剔除外，社区的最基本功能已经大体完成了。 接下来，将会完善社区功能，并逐步完成画板功能。