微信小程序 内容评论-回复评论-回复回复的实现

效果图

先展示代码js逻辑有详细注释

代码格式有点乱复制粘贴格式化即可

wxml

<!-- 评论-回复-回复评论显示区域 -->  
<view class="container">
    <!-- 总共评论数 -->    
    <view class="total">共{
  {comment_list.length + comment_list2.length}}条评论</view>    
    <!-- END -->
    <!-- 评论框 -->    
    <input confirm-type="send" class="container_inp" value="{
    {value}}" placeholder="{
    { placeholder2 }}" placeholder-class="container_place" bindconfirm="bindconfirm"></input>    
    <!-- END -->
    <!-- 用户评论回复显示区域 -->    
    <view class="container-item" wx:for="{
    {comment_list}}" wx:for-item="list" wx:key="key">
      <image class="item_img" src="{
    {list.comment_user_avatar}}"></image>
      <view class="item_right">
        <view class="right_name">{
  {list.comment_user_name}}</view>
        <view class="right_content">
          <text class="right_content_txt" bindtap='replyComment' data-type="1" data-name='{
    {list.comment_user_name}}' data-cid='{
    {list.comment_id}}' data-pid="{
    {list.parent_id}}">{
  {list.comment_text}}</text>
          <text class="right_content_txt2">{
  {list.comment_time}}</text>
          <!-- 回复评论 -->
          <!-- 判断回复列表数据中的parent_id和评论列表数据的comment_id是否相等 相等就显示 不等就不显示 -->          
          <view class="reply" wx:for="{
    {comment_list2}}" wx:for-item="list2" wx:key="list2" wx:if="{
    {list2.parent_id == list.comment_id}}">
            <image class="reply_img" src="{
    {list2.comment_user_avatar}}"></image>
            <view class="reply_right">
              <view class="right_name">{
  {list2.comment_user_name}}</view>
              <text wx:if="{
    {list2.reply_name == ''}}" class="right_content_txt" bindtap='replyComment' data-type="2" data-name='{
    {list2.comment_user_name}}' data-cid='{
    {list2.comment_id}}' data-pid="{
    {list2.parent_id}}">{
  {list2.comment_text}}</text>
              <text wx:if="{
    {list2.reply_name != ''}}" bindtap='replyComment' data-type="2" data-name='{
    {list2.comment_user_name}}' data-cid='{
    {list2.comment_id}}' data-pid