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

本文链接：https://blog.csdn.net/qq_43447509/article/details/108094749

本文介绍了如何在微信小程序中实现内容评论、回复评论以及回复回复的功能。通过展示wxml、wxss和js代码段，详细讲解了输入框失去焦点时的逻辑处理以及顶部和底部输入框的操作相似性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

先展示代码`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