H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】Vue.js&uni-app开发评论模块–递归渲染回复评论

先看需求

::: hljs-center

image.png

:::

我们需要将评论数据进行渲染成如图所示,后端给我们返回的数据格式又是啥样的呢?答案就是一级一级的父子层级嵌套的数据结构:
::: hljs-center

15930076031.jpg

:::
面对这样的数据结构,我们怎么渲染呢?
通过递归的形式渲染就比较可行

首先,我们创建一个回复评论的组件,父组件中将评论的回复数组传给子组件,在子组件中进行渲染,如果回复的数组中还有子回复那么这时候把数据传给回复组件即可。这样就能达到递归渲染数组的目的了。

引用回复组件

在父组件中引用回复组件

import replyComment from '../comment-item/comment-item.vue'

components: {
    replyComment
},

<!-- 回复 -->
                                    <replyComment style="padding-left: 68rpx;" :commentChildren="item.children" @child_up="handleCommentUp"
                                     @child_down="handleCommentDown" @child_reply="handleCommentInputPopupShow"></replyComment>

回复组件

replyComment:

<template>
    <view class="reply-content-wrapper">
        <view class="comment-reply-data" v-for="(item,index) in commentChildren" :key="index">
            <view class="comment-reply-user">
                <view class="comment-root-header flex-row">
                    <image :src="item.criticImg" mode=""></image>
                    <view class="username">
                        {{item.criticName}}
                    </view>
                </view>
                <view class="replycomment-content">
                    <text>回复</text><text class="replyer">{{item.reCriticName}}</text>
                    <text>{{item.comment}}</text>
                </view>
                <view class="comment-data flex-row-space">
                    <view class="create-time">
                        {{formatDate(item.createTime)}}
                    </view>
                    <view class="operation-icon flex-row">
                        <view class="operation-item">
                            <i class="icon iconzan_before" @tap="handleCommentUp(item.id)"></i>
                            <text>{{item.supportCount}}</text>
                        </view>
                        <view class="operation-item">
                            <i class="icon iconcai_before" @tap="handleCommentDown(item.id)"></i>
                            <text>{{item.opposeCount}}</text>
                        </view>
                        <view class="operation-item">
                            <i class="icon iconpinglun" @tap="handleCommentInputPopupShow(item)"></i>
                        </view>
                    </view>
                </view>
            </view>
            <replyComment v-if="item.children" :commentChildren="item.children" @child_up="handleCommentUp" @child_down="handleCommentDown"
             @child_reply="handleCommentInputPopupShow"></replyComment>
        </view>
    </view>
</template>

<script>
    import {
        formateTime
    } from '../../utils/index.js'
    export default {
        name: 'replyComment',
        props: {
            commentChildren: {
                type: Array,
                default: []
            }
        },
        data() {
            return {

            };
        },
        methods: {
            // 格式化时间
            formatDate(time) {
                if (!time) {
                    return ''
                }
                return formateTime(time)
            },
            handleCommentUp(id) {
                this.$emit('child_up', id)
            },
            handleCommentDown(id) {
                this.$emit('child_down', id)
            },
            handleCommentInputPopupShow(item) {
                this.$emit('child_reply', item)
            },
        }
    }
</script>

<style lang="less" scoped>
    .comment-reply-data {
        .comment-root-header {
            color: #333333;
            margin: 27rpx 0;

            image {
                width: 48rpx;
                height: 48rpx;
                border-radius: 40rpx;
                margin-right: 20rpx;
            }
        }

        .comment-root-user {
            border-bottom: 2rpx solid #eee;
        }

        image {
            width: 48rpx;
            height: 48rpx;
            border-radius: 40rpx;
            margin-right: 20rpx;
        }

        .replycomment-content {
            margin-bottom: 20rpx;
            word-break: break-all;

            .replyer {
                display: inline-block;
                padding: 0 12rpx;
                color: #333333;
                position: relative;
                bottom: 2rpx;
            }
        }

        .comment-data {
            color: #666;
            line-height: 20rpx;
            font-size: 20rpx;
            padding-bottom: 28rpx;
            border-bottom: 2rpx solid #EDEDED;

            .operation-icon {
                .operation-item {
                    margin-left: 49rpx;

                    .icon {
                        font-size: 22rpx;
                    }
                }
            }

            // 点赞
            .active-support {
                animation-name: support;
                animation-duration: 500ms;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }
        }
    }
</style>

那么实际效果呢?

::: hljs-center

15930081491.jpg

:::

其实,刚开始看到这个数据结构十分头疼,后来仔细想想递归是能够解决的,然后就开始动手,没想到真就实现了。开发中我们可能会遇到各种需求,只要冷静下来好好想想,总能找到解决办法的。

老铁们可以关注我的个人公众号
wodegongzhonh.jpg
也可以去我的博客瞅瞅

本文地址:H5W3 » 【前端技术】Vue.js&uni-app开发评论模块–递归渲染回复评论

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址