uniapp回复评论展开以及收起

这几天开发回复的功能以及点赞展示剩余评论，费劲脑汁的给弄出来了

样式

数据结构：只有两层 父评论和所有子评论

子评论代码

<template><div><view class="comment" v-for="info in commentChildren" :key="info.id"><div class="c-left"><image :src="info.avatar">image>div><div class="c-right"><div class="c-name">{{ info.nickName }}div><div class="c-comment">{{ info.content }}div><div class="c-actions"><div class="c-time">{{ info.createTime }}div><div class="action-item"><image@click="btnPrarse(info)":src="info.praise? '/static/index/like-done.png': '/static/index/like-icon.png'">image>{{ info.likesNumber }}div><div class="action-item"><imagesrc="/static/index/comment-icon.png"@click="btnComment(info)">image><text v-if="info.childrenCommentInfos.length">{{info.childrenCommentInfos.length}}text><text v-else>0text>div>div><div v-if="info.childrenCommentInfos.length > 0"><div v-if="info.contentAll"><view class="comment"><div class="c-left"><image :src="info.childrenCommentInfos[0].avatar">image>div><div class="c-right"><div class="c-name">{{ info.childrenCommentInfos[0].nickName }}<div style="color: #333; margin-top: 10rpx">回复<text class="replyer">{{ info.childrenCommentInfos[0].beRepliedName }}：text><text class="c-comment">{{info.childrenCommentInfos[0].content}}text>div>div><div class="c-actions"><div class="c-time">{{ info.childrenCommentInfos[0].createTime }}div><div class="action-item"><image@click="btnPrarse(info.childrenCommentInfos[0])":src="children.praise? '/static/index/like-done.png': '/static/index/like-icon.png'">image>{{ info.childrenCommentInfos[0].likesNumber }}div><div class="action-item"><imagesrc="/static/index/comment-icon.png"@click="btnComment(info.childrenCommentInfos[0])">image>div>div>div>view>div><div v-else><viewclass="comment"v-for="children in info.childrenCommentInfos":key="children.id"><div class="c-left"><image :src="children.avatar">image>div><div class="c-right"><div class="c-name">{{ children.nickName }}<div style="color: #333; margin-top: 10rpx">回复<text class="replyer">{{ children.beRepliedName }}：text><text class="c-comment">{{ children.content }}text>div>div><div class="c-actions"><div class="c-time">{{ children.createTime }}div><div class="action-item"><image@click="btnPrarse(children)":src="children.praise? '/static/index/like-done.png': '/static/index/like-icon.png'">image>{{ children.likesNumber }}div><div class="action-item"><imagesrc="/static/index/comment-icon.png"@click="btnComment(children)">image>div>div>div>view>div><div class="more"><divstyle="color: #b6ea7a"v-show="info.contentAll"@click="changeAllFun(info)">展开剩余{{ info.childrenCommentInfos.length - 1 }}条回复div><div v-show="!info.contentAll">div><divv-show="!info.contentAll"style="color: #b6ea7a"@click="changeAllFun(info)">收起div>div>div>div>view>div>
template><script>
import { likeOrDislikeStrategy } from '@/service/index'
import Vue from 'vue'
// 引入bus文件
import bus from '../commen-item/bus'
// 发送消息  第一个参数为消息名（事件名），第二个参数为通信的值（可以不穿）
export default Vue.extend({props: {commentChildren: { type: Array, default: [] },},data () {return {title: 'Hello',totle: 0,flag: false,}},methods: {changeAllFun (info) {console.log(info)let list = this.commentChildrenconsole.log(list)list.forEach((elem) => {console.log(elem.id == info.id)if (elem.id == info.id) {elem.contentAll = !elem.contentAll}})uni.setStorageSync("commentList", list)bus.$emit('resComList');},btnComment (item) {bus.$emit('item', item);},btnPrarse (info) {let list = uni.getStorageSync('commentList')let optType = nullinfo.praise ? optType = 1 : optType = 0let parmars = {optType: optType,strategyCommentId: info.id,}likeOrDislikeStrategy(parmars).then(res => {if (res.code == 200) {this.seachId(list, info.id)}else {this.$toast(res.msg)}})},seachId (list, id) {let result = nullfor (let i = 0; i < list.length; i++) {if (result !== null) {break //跳出循环的关键}if (list[i].id === id) {let res = list[i].nickName;result = res //取值关键      list[i].praise = !list[i].praiseif (list[i].praise) {list[i].likesNumber++} else {list[i].likesNumber--}break} else if (list[i].childrenCommentInfos) {//递归条件this.seachId(list[i].childrenCommentInfos, id);} else {continue}}uni.setStorageSync("commentList", list)bus.$emit('resComList');}},
})
script><style lang="less">
.comment {display: flex;padding: 24rpx 0;border-top: 1rpx solid #ececec;.c-left {image {.wh(70rpx, 70rpx);border-radius: 50%;}}.c-right {flex: 1;margin-left: 22rpx;margin-top: 14rpx;.more {display: flex;align-items: center;justify-content: space-between;}.c-name {.replyer {color: #000;margin: 0 5px;}.sizeColor(32rpx, #000);}.c-comment {margin-top: 10rpx;.sizeColor(32rpx, #000);word-break: break-all;}.c-actions {margin-top: 20rpx;display: flex;justify-content: flex-end;.c-time {margin-right: auto;.sizeColor(20rpx, #999);}.action-item {display: flex;align-items: center;margin-right: 48rpx;.sizeColor(24rpx, #999);image {margin-right: 14rpx;.wh(28rpx, 24rpx);}}}}
}
style>

有几个需要注意的
1、渲染多层的时候，并且需要调用父组件方法时，要使用vue的事件总线，否则找不到方法
2、不自己写一便是不知道问题的所在，代码有点臃肿，大佬勿喷，多谢指点

相关代码目录

gitee链接

https://gitee.com/wang_ya_ge/applet/tree/master，下载看看吧，src的代码也很有帮助

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！