微信小程序 内容评论-回复评论-回复回复的实现
效果图
先展示代码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 //评论列表 }) } }本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-08-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
