微信小程序之帖子评论回复组件的开发

熊孩子依旧调皮
879 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

image.png

前言

近期实现了一个类似于贴吧可以聊天回复评论的社区功能（包括点赞等），一般情况下这样做的目的是为了方便不想下载APP的用户，毕竟用户觉得功能不错后才会下载进一步使用。

帖子列表和点赞

列表

列表一般显示的是用户头像、名称、时间、点赞、评论数量、详情，所以先实现帖子该有的布局，创建最外层的view视图加上wx:for的渲染代表是一个帖子

<view class="doctor-list-div" wx:for="{{pageToptic}}" wx:for-item="item" wx:for-index="index" wx:key="index" bindtap="goArticle" data-item="{{item}}">    
</view>

列表信息

列表信息，顶部是头像和名称，可以参考其他的布局，中间是帖子的详情，注意~ 头像尽量设置成圆形

 <view class="activeTitle">
    <view>
      <image src="{{item.userIcon}}"></image>
    </view>
    <view>
      <text>{{item.toptic}}</text>
    </view>
    </view>
</view>

最下边是时间和点赞数量，点赞右侧要有点赞的数量

<view class="icon">
    <view catchtap="setGiveUp" data-index="{{index}}">
      <image src="'/icon/dianzan_dianji.png"></image>
      <text>{{item.giveUpCount}}</text>
    </view>
</view>

帖子详情

帖子列表界面只需要请求和渲染即可，点击任意一个即可进入到该详情，这个需要请求接口（和后端商议好），进去后上边是帖子的内容并在顶部带有标题和时间。

  <view class="article">
    <view class="title">
      <text>{{details.toptic}}</text>
    </view>
    <view class="icon_nickName">
      <view class="icon">
        <image src="{{details.userIcon}}"></image>
      </view>
    </view>
    <view class="article_content">
      <text>{{content}}</text>
    </view>
  </view>

注意！帖子的标题不能和时间在一平行线内

帖子评论

帖子评论要分一级和二级评论，每个二级评论要展示在一级评论的下方，这样可方便区分，并且可以给一级评论进行点赞

评论列表渲染

注意！ 一般情况下，一级二级评论可以有无限个，这就需要用到渲染列表，并且需要把每个二级评论准确的插入到一级评论内，也是说每个一级内都会有一个Children的数组存储二级

<view class="details" wx:if="{{item.childrens.length > 0}}">
  <view wx:for="{{item.childrens}}" wx:for-item='childItem' wx:for-index="childIndex">
    <text>{{childItem.nickName}}：</text>
    <text>{{childItem.content}}</text>
  </view>
</view>

判断该children是否为空，进行展示

评论

评论是点击某一个人聊天信息后，即可评论，并且评论后要实时刷新列表，这就需要绑定点击事件获取当前ID，来评论

  <view class="comments_input">
    <input type="text" placeholder="请输入评论..." focus="{{inputShowed}}" value="{{keyword}}" bindinput="setKeyword"></input>
  </view>
  <view class="sendMsg">
    <view catchtap="sendKeyword" style="color:#999">
      <text>发送</text>
    </view>
</view>

点击发送后需要把input的输入框收回并清空 image.png

最后

评论发布后，刷新评论列表如果当前的数据量比较大，最好做成分页，以免造成影响用户体验~

avatar
文章
阅读
粉丝