社区首页 >专栏 >微信小程序内容评论-回复评论-回复回复的实现

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

peng_tianyu

发布于 2022-12-15 09:12:59

3K00

代码可运行

文章被收录于专栏：前端开发随记前端开发随记

运行总次数：0

代码可运行

效果图

先展示代码`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="{{list2.parent_id}}" class="right_content_txt">回复 <text class="right_name">{{list2.reply_name}}：</text>{{list2.comment_text}}</text>
              <text class="right_content_txt2">{{list2.comment_time}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>    
    <!-- END -->
    <!-- 结束 -->    
    <view class="end">      
      <text class="end_txt" space="nbsp">—  THE END  —</text>    
    </view>    
    <!-- END -->
  </view>  
  <!-- END -->
  <!-- 底部评论 -->  
  <view class="foot">
    <view class="say">
      <view class="flex">
        <image class="say_img" src="/images/assemblyNumber/discoveryDetails/icon3.png"></image>
        <input confirm-type="send" class="say_inp" placeholder="{{ placeholder }}" value="{{ comment_text }}" focus="{{ focus }}" bindblur="blur" bindconfirm="confirm"></input>
      </view>
    </view>
    <image class="foot_img" src="/images/assemblyNumber/discoveryDetails/icon4.png"></image>
    <text class="foot_num">210</text>
    <image class="foot_img2" src="/images/assemblyNumber/discoveryDetails/icon5.png"></image>
    <text class="foot_num">368</text>
  </view>  
  <!-- END -->

wxss

/* 评论-回复-回复评论显示区域 */
.container{  width: 718rpx;  margin-top: 39rpx;  padding-left: 32rpx;}
.total{  font-size: 24rpx;  color: #999999;   margin-left: 1rpx;}
.container_inp{  width: 661rpx;  height: 32rpx;  background-color: #F2F2F2;  border-radius: 8rpx;  padding: 17rpx 0rpx 15rpx 25rpx;  margin-top: 24rpx;  margin-bottom: 47rpx  ;}
.container_place{  font-size: 24rpx;  color: #999999;}
.container-item{  display: flex;  margin-bottom: 34rpx;  align-items: flex-start;}
.item_img{  width: 64rpx;  height: 64rpx;  margin-right: 17rpx;}
.item_right{  display: inline-block;  width: 636rpx;  border-bottom: 2rpx solid #E5E5E5;  padding-bottom: 40rpx;}
.right_name{  font-size: 24rpx;  color: #999999;}
.right_content{  width: 603rpx;  margin-top: 20rpx;}
.right_content_txt{  font-size: 26rpx;  color: #333333;}
.right_content_txt2{  font-size: 24rpx;  color: #CCCCCC;  margin-left: 30rpx;}
.reply{  display: flex;   margin-top: 32rpx;  align-items: flex-start;  }
.reply_img{  width: 40rpx;  height: 40rpx;  margin-right: 17rpx;}
.reply_right{  display: inline-block;  width: 546rpx;}
/* 结束 */
.end{  margin-top: 47rpx;  margin-bottom: 48rpx;  text-align: center;}
.end_txt{  font-size: 24rpx;  color: #999999;}
/* 底部评论 */
.foot{  width: 686rpx;  padding: 17rpx 32rpx;  background-color: #FFFFFF;  box-shadow:0rpx -1rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);  position: fixed;  bottom: 0;  left: 0;}
.say{  display: inline-block;  width: 360rpx;  padding: 20rpx 0rpx 10rpx 24rpx;  background-color: #F2F2F2;  border-radius: 8rpx;}
.flex{  display: flex;  align-items: center;}
.say_img{  width: 24rpx;  height: 24rpx;  margin-right: 13rpx;  /* vertical-align: 10rpx; */}
.say_inp{  display: inline-block;  width: 300rpx;  height: 33rpx;}
.say_place{  font-size: 28rpx;  color: #333333;}
.foot_img{  width: 45rpx;  height: 40rpx;  margin-left: 50rpx;  margin-right: 17rpx;}
.foot_num{  font-size: 24rpx;  vertical-align: 10rpx;}
.foot_img2{  width: 40rpx;  height: 40rpx;  margin-left: 30rpx;  margin-right: 17rpx;}

js

Page({
  data: {
  
    //评论数据
    comment_list: [
      {
        comment_id: 1, //评论id
        comment_pr_id: 1 //评论文章所属id
        comment_user_avatar: '/images/assemblyNumber/discoveryDetails/per1.png', //评论用户头像(路径替换为你的图片路径)
        comment_user_name: '高飞', //评论人昵称
        comment_text: '去办理优待证是挺难的，但是办理了优待证之后福利特别好', //评论内容
        comment_time: '2020年8月18日', //评论时间
        reply_id: 0, //回复谁的评论，默认为0
        parent_id: 0, //评论所属评论id，默认为0
        reply_name: '' //回复评论用户的昵称 默认为''
      },
      {
        comment_id: 2,
        comment_pr_id: 1,
        comment_user_avatar: '/images/assemblyNumber/discoveryDetails/per2.png',
        comment_user_name: '张维默',
        comment_text: '去办理优待证是挺难的，但是办理了优待证之后福利特别好',
        comment_time: '2020年8月18日',
        reply_id: 0,
        parent_id: 0,
        reply_name: ''
      },
      {
        comment_id: 3,
        comment_pr_id: 1,
        comment_user_avatar: '/images/assemblyNumber/discoveryDetails/per3.png',
        comment_user_name: '张剑锋',
        comment_text: '去办理优待证是挺难的，但是办理了优待证之后福利特别好',
        comment_time: '2020年8月18日',
        reply_id: 0,
        parent_id: 0,
        reply_name: ''
      }
    ],
    
    //回复数据
    comment_list2: [
      {
        comment_id: 4,
        comment_pr_id: 1,
        comment_user_name: '张剑锋',
        comment_user_avatar: '/images/assemblyNumber/discoveryDetails/per3.png',
        comment_text: "大家快去办理吧!!!",
        comment_time: '2020年8月18日',
        reply_id: 3,
        parent_id: 3,
        reply_name: ''
      },
      {
        comment_id: 5,
        comment_pr_id: 1,
        comment_user_name: '沈非隆',
        comment_user_avatar: '/images/assemblyNumber/discoveryDetails/per4.png',
        comment_text: "办理优待证大概需要多长时间呢会不会需要特别长时间",
        comment_time: '2020年8月18日',
        reply_id: 3,
        parent_id: 3,
        reply_name: '张剑锋'
      }
    ],

    /*定义一些数据*/
    focus: false, //输入框是否聚焦
    placeholder: '说点什么...', //底部输入框占字符
    placeholder2: '说点什么，让ta也认识看笔记的你', //顶部输入框占字符
    value: null, //顶部输入框内容
    comment_text: null, //底部评论框内容

    /*
     *以下初始化数据是用户点击任意一条评论或回复时需要设置的数据
     *然后将设置好的数据传递给评论时新创建的评论数据对象
    */
    now_reply_name: null, //当前点击的评论或回复评论的用户昵称
    now_reply_type: 0, //当前回复类型 默认为0 1为回复评论 2为回复回复
    now_parent_id: 0, //当前点击的评论或回复评论的所属评论id
    now_reply: 0, //当前点击的评论或回复评论的id

    //模拟用户信息
    userinfo: {
      nickName: '马飞', //用户昵称
      avatarUrl: '/images/assemblyNumber/discoveryDetails/per5.png' //用户头像
    }
  },

  //点击用户评论或回复时触发
  replyComment(e) {
    var cid = e.currentTarget.dataset.cid; //当前点击的评论id
    var name = e.currentTarget.dataset.name; //当前点击的评论昵称
    var pid = e.currentTarget.dataset.pid; //当前点击的评论所属评论id
    var type = e.currentTarget.dataset.type; //当前回复类型
    this.setData({
        focus: true, //输入框获取焦点
        placeholder: '回复' + name + '：', //更改底部输入框占字符
        now_reply: cid, //当前点击的评论或回复评论id
        now_reply_name: name, //当前点击的评论或回复评论的用户名
        now_parent_id: pid, //当前点击的评论或回复评论所属id
        now_reply_type: type, //获取类型(1回复评论/2回复-回复评论)
    })
  },

  //底部输入框提交内容时触发
  confirm(e){
    //获取输入框输入的内容
    var comment_text = e.detail.value;
    //判断用户是否输入内容为空
    if (comment_text == '') {
      //用户评论输入内容为空时弹出
      wx.showToast({
       title: '请输入内容', //提示内容
       icon: 'none' //提示图标
     })
    } else {
        var date = new Date(); //创建时间对象
        var year = date.getFullYear(); //获取年      
        var month = date.getMonth() + 1; //获取月      
        var day = date.getDate(); //获取日      
        var hour = date.getHours(); //获取时      
        var minute = date.getMinutes(); //获取分      
        var second = date.getSeconds(); //获取秒      
        var time = `${year}年${month}月${day}日${hour}时${minute}分${second}秒`; //当前时间
        var comment_list = this.data.comment_list; //获评论数据
        var comment_list2 = this.data.comment_list2; //获取回复数据
        var comment_list_length = comment_list.length; //获取当前评论数组的长度
        var last_id = comment_list[comment_list_length - 1].comment_id; //获取最后一个评论的id
        var comment_list2_length = comment_list2.length; //获取回复数组的长度
        var last_id2 = comment_list2[comment_list2_length - 1].comment_id; //获取最后回复的id
        var new_id = last_id > last_id2 ? last_id + 1 : last_id2 + 1; //当前将要发表的评论的id
        var userinfo = this.data.userinfo; //获取当前的用户信息      
        var comment_user_name = userinfo.nickName //用户昵称      
        var comment_user_avatar = userinfo.avatarUrl //用户头像
        var reply_name = null; //回复评论用户的昵称
        var parent_id = 0; //评论所属哪个评论的id
        var reply_id = this.data.now_reply; //回复谁的评论id
        //通过回复谁的评论id判断现在是评论还是回复
        if(reply_id != 0) {
	  //现在是回复
	  var reply_type = this.data.now_reply_type; //回复类型
	  //通过回复类型判断是回复评论还是回复回复
	  if (reply_type == 1) {
	    //回复评论
	    parent_id = this.data.now_reply; //回复评论所属评论id
	    reply_name = this.data.now_reply_name; //回复评论用户昵称
	  } else {
	    //回复回复
	    parent_id = this.data.now_parent_id; //回复评论所属评论id
	    reply_name = this.data.now_reply_name; //回复评论用户昵称
	  }
        } else {
	  //现在是评论
	}
	var comment_detail = {} //评论/回复对象
	comment_detail.comment_id = new_id; //评论Id      
	comment_detail.comment_user_name = comment_user_name; //用户昵称      
	comment_detail.comment_user_avatar = comment_user_avatar; //用户头像      
	comment_detail.comment_text = comment_text; //评论内容      
	comment_detail.comment_time = time; //评论时间      
	comment_detail.reply_id = reply_id; //回复谁的评论的id      
	comment_detail.parent_id = parent_id; //评论所属哪个评论id      
	comment_detail.reply_name = reply_name; //回复评论人的昵称
	//判断parent_id是否为0 为0就是评论 不为0就是回复
	if(comment_detail.parent_id > 0) {
	  //回复
	  comment_list2.unshift(comment_detail);
	} else {
	  //评论
	  comment_list.unshift(comment_detail);
	}
	//动态渲染
	ths.setData({
	  //发表评论后将以下数据初始化 为下次发表评论做准备
	  comment_text: null, //评论内容        
	  now_reply: 0, //当前点击的评论id        
	  now_reply_name: null, //当前点击的评论的用户昵称        
	  now_reply_type: 0, //评论类型        
	  now_parent_id: 0, //当前点击的评论所属哪个评论id        
	  placeholder: "说点什么...", //输入框占字符
	  //将加入新数据的数组渲染到页面        
	  comment_list, //评论列表        
	  comment_list2 //回复列表
	})
  }

输入框失去焦点时触发

//下面的方法可以绑定在输入框的bindblur属性上	
blur(e) {
  const text = e.detail.value.trim();
  if( text == ''){
    this.setData({
      now_reply: 0, //当前点击的评论或回复评论的id        
      now_reply_name:null, //当前点击的评论或回复评论的用户昵称        
      now_reply_type:0, //当前回复类型        
      now_parent_id:0, //当前点击的评论或回复评论的所属评论id        
      placeholder: "说点什么呢，万一火了呢", //占字符        
      focus:false //输入框获取焦点
    })
  }
}

如果你是点击输入框右边按钮才发送内容的话需要在输入框bindinput属性绑定以下方法获取用户输入的值

//获取输入框内容
getCommentText(e) {
  var val = e.detail.value;
  this.setData({
    comment_text: val
  })
}

顶部输入框的逻辑与底部类似粘贴以下代码格式化即可

//顶部评论框提交内容时触发  
bindconfirm(e) {    var comment_text = e.detail.value    //判断用户是否输入内容为空    if (comment_text == '') {      //用户评论输入内容为空时弹出      wx.showToast({        title: '请输入内容', //提示内容        icon: 'none'      })    } else {      var date = new Date(); //创建时间对象      var year = date.getFullYear(); //获取年      var month = date.getMonth() + 1; //获取月      var day = date.getDate(); //获取日      var hour = date.getHours(); //获取时      var minute = date.getMinutes(); //获取分      var second = date.getSeconds(); //获取秒      var time = `${year}年${month}月${day}日${hour}时${minute}分${second}秒`; //当前时间
      var comment_list = this.data.comment_list; //获取data中的评论列表      var comment_list2 = this.data.comment_list2; //获取data中的回复列表      var userinfo = this.data.userinfo; //获取当前的用户信息      var comment_user_name = userinfo.nickName //用户昵称      var comment_user_avatar = userinfo.avatarUrl //用户头像      // var reply_id = this.data.reply_id //获取当前输入评论的id      var comment_list_length = comment_list.length; //获取当前评论数组的长度      var last_id = comment_list[comment_list_length - 1].comment_id; //获取最后一个评论的id      var comment_list2_length = comment_list2.length; //获取回复数组的长度      var last_id2 = comment_list2[comment_list2_length - 1].comment_id; //获取最后回复的id      var new_id = last_id > last_id2 ? last_id + 1 : last_id2 + 1; //赋值当前评论的id      var reply_name = null;      var parent_id = 0;      var reply_id = this.data.now_reply; //获取当前输入评论的id
      var comment_detail = {} //声明一个评论/回复对象      comment_detail.comment_id = new_id; //评论Id      comment_detail.comment_user_name = comment_user_name; //用户昵称      comment_detail.comment_user_avatar = comment_user_avatar; //用户头像      comment_detail.comment_text = comment_text; //评论内容      comment_detail.comment_time = time; //评论时间      comment_detail.reply_id = reply_id; //回复谁的评论的id      comment_detail.parent_id = parent_id; //评论所属哪个评论id      comment_detail.reply_name = reply_name; //回复评论人的昵称
      comment_list.unshift(comment_detail);
      this.setData({        value: null, //评论内容        now_reply: 0, //当前点击的评论id        now_reply_name: null, //当前点击的评论的用户昵称        now_reply_type: 0, //评论类型        now_parent_id: 0, //当前点击的评论所属哪个评论id        placeholder2: "说点什么，让ta也认识看笔记的你", //输入框占字符        comment_list //评论列表      })    }  }