uniapp 微信小程序仿抖音评论区功能，支持展开收起

本文主要是介绍uniapp 微信小程序仿抖音评论区功能，支持展开收起，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近需要写一个评论区功能，所以打算仿照抖音做一个评论功能，支持展开和收起，

首先我们需要对功能做一个拆解，评论区功能，两个模块，一个是发表评论模块，一个是评论展示区。接下来对这两个模块进行详细描述。

使用到的技术 uniapp uview2.0 文章最后我会贴上全部源码

一、发表评论模块

这个模块使用uview的两个组件来完成分别是u-popup弹出层和u-input输入框

下面是代码和展示图：

<u-popup :show="talkShow" mode="bottom" :customStyle="{'width':'100%','border-radius':'8rpx'}" @close="popclosed" @open="keyboard=true" :safeAreaInsetBottom="true"><view class="flex justify-between align-center" style="padding: 32rpx;"><div class="cirbOX padding-left padding-right-sm"><u--form labelPosition="left" :model="talkData" :rules="Rules" ref="Form" :borderBottom="false"><u-form-item label=" " prop="txt" :borderBottom="false" ref="item1" labelWidth='0'><u--input :focus="keyboard" v-model="talkData.txt" cursorSpacing="30" maxlength="100" :placeholder="pinglunHolder" border="none" clearable></u--input></u-form-item></u--form></div><div class="submitpinglun" @click="submit">发布</div></view></u-popup>

这部分需要注意两点

1.input组件的focus属性的设置：

在弹出层弹出的时候在open事件中对input的focus属性布尔值设置为true，close时候设置focus为false。这样做的目的是在弹出输入评论的弹窗时会拉起小键盘，这个交互方式是模仿的微信朋友圈发布评论的形式。

2.input的cursorSpacing属性（输入框聚焦时底部与键盘的距离）设置：

当键盘拉起时候整个输入框因为设置了cursorSpacing="30"，故整体页面会被小键盘托起。当收起小键盘时候，输入框有回归到手机底部，因为我们popup设置的是底部的弹出层。这样是和微信朋友圈发布评论是对标的。

二、展示评论区的功能

这一部分我封装成了组件，因为需求的要求需要下拉加载评论故在组件外部循环一级评论，组件内部展示一级评论和二级评论，其中二级评论是在组件内部去循环,

循环一级评论的时候需要注意，因为后续要获取pinglun组件的实例，所以在ref的设置上面起初我按照for循环提供的index来拼的字符串，这也导致后续bug的出现埋下伏笔，所以我后续调整了，选择了id这个唯一值作为组件实例的ref名字，这个很关键！

<div v-for="(item,index) in onePagePinglunList" :key="item.id" class="margin-bottom"><pinglun :ref="`pinglun-${item.levelOneCommentVo.id}`" :caseIdData="caseId" :data="item" :indexxx="index" @comment="goComment" @noLogin="sonNoLogin"></pinglun></div>

组件代码：

<template><div><!-- 一级评论 --><div class="flex justify-start align-start margin-bottom-sm"><div class="margin-right-xs"><d-image :dSrc="onePageList.levelOneCommentVo.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx"></d-image></div><div class="flex-sub"><div class="flex justify-start align-center"><div class="name margin-right-sm">{{onePageList.levelOneCommentVo.userName}}</div><div class="zuozhe flex justify-center align-center" v-if="onePageList.levelOneCommentVo.belongAuthor===1">作者</div></div><div class="flex justify-between align-center" @click="goPinglun(1,onePageList.levelOneCommentVo.id,onePageList.levelOneCommentVo.userName,onePageList.levelOneCommentVo.id)"><div class="content flex-sub">{{onePageList.levelOneCommentVo.content}}</div><div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(1,'',onePageList.levelOneCommentVo.id)"><div class="margin-bottom-xs"><div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===0"><u-icon name="heart" color="#667286" size="34rpx"></u-icon></div><div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===1"><u-icon name="heart-fill" color="red" size="34rpx"></u-icon></div></div><div class="likeNum">{{onePageList.levelOneCommentVo.likeCount}}</div></div></div><div class="time">{{ $u.timeFrom(new Date(onePageList.levelOneCommentVo.createTime).getTime())}}</div></div></div><!-- 二级评论 --><div class="erpinglunBox" :style="{'height':`${pingjiaBoxMaxHeight}px`,'opacity':pinglunOpcity,}"><div class="pinglunDom"><div v-for="(item,index) in onePageList.twoLevelpinglun" :key="item.id" class="margin-bottom-sm"><div class="flex justify-start align-start"><div class="margin-right-xs"><d-image :dSrc="item.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx"></d-image></div><div class="flex-sub"><div class="flex justify-start align-center"><div class="name margin-right-sm">{{item.userName}}</div><div class="zuozhe flex justify-center align-center margin-right-sm" v-if="item.belongAuthor===1">作者</div><div class="name" v-if="item.isReplayTwoComment===1">回复 {{item.replayLevelTwoCommentUser.userName}}</div></div><div class="flex justify-between align-center" @click="goPinglun(2,item.id,item.userName,onePageList.levelOneCommentVo.id)"><div class="content flex-sub">{{item.content}}</div><div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(2,index,item.id)"><div class="margin-bottom-xs"><div v-show="item.isCurrentUserLike===0"><u-icon name="heart" color="#667286" size="34rpx"></u-icon></div><div v-show="item.isCurrentUserLike===1"><u-icon name="heart-fill" color="red" size="34rpx"></u-icon></div></div><div class="likeNum">{{item.likeCount}}</div></div></div><div class="time">{{ $u.timeFrom(new Date(item.createTime).getTime())}}</div></div></div></div></div></div><!-- 展开和收起按钮 --><div class="flex justify-start align-center" style="padding-left: 84rpx;"><div class="seeMore padding-top-sm padding-bottom flex align-center" v-if="onePageList.levelTwoCommentCount > 0&&params.current <= totalPage" @click="$u.throttle(getTwoLevelPinglun, 1000,true)"><div class="margin-right-xs">查看更多回复</div><u-icon name="arrow-down" color="#00875A" size="28rpx" :bold="true"></u-icon></div><div class="seeMore retract padding-top-sm padding-bottom margin-left flex justify-center align-center" v-if="params.current > 1" @click="$u.throttle(retract, 1000,true)"><div class="margin-right-xs">收起</div><u-icon name="arrow-up" color="#00875A" size="28rpx" :bold="true"></u-icon></div></div></div>
</template>

感觉唯一的难点在于因为展开收缩使用的过渡动画，大家应该都知道，想使用这个过渡必须设置有效值，也就是说比如我给高度写过渡动画，从一个高度到一个高度，都需要是具体的值，atuo这种被内容撑开的高度是不作数的。

这里拿高度，需要注意的是需要等待渲染完毕再去获取高度，不然拿到的值就是不准确的。

下面是我写的获取高度的函数。如果一个nexttick也获取不到准确高度，那么就再加个延时器，就差不多可以获取到准确高度了。

	updatHeight() {let that = thisthis.$nextTick(() => {// this.timer = setTimeout(() => {this.createSelectorQuery().select(".pinglunDom").boundingClientRect(function(rect) {// console.log(rect);that.pingjiaBoxMaxHeight = rect.heightthat.pinglunOpcity = 1}).exec();// }, 0)})},

还有一个需要注意的点，就是在一级评论发布之后，需要拿到所有pinglu组件的实例去调用这个方法，重置所有二级评论的高度。调用这个方法的前提也必须是一级评论的渲染完毕，不然还是不起作用

以下是代码：

this.$forceUpdate();this.$nextTick(() => {for (let i = 0; i < this.onePagePinglunList.length; i++) {this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].updatHeight() if (this.onePagePinglunList[i].twoLevelpinglun.length === 0) {this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].params.current = 1}}})

至此应该就没什么需要注意的地方了

可能也是第一次写这个功能，还有很多可以优化的地方。希望对各位有所帮助，接下来我把评论功能所有源码贴在下面。

因为我的评论功能是在案例详情里面的，所以有两个文件，一个是案例详情，一个就是封装的评论组件

案例详情：

<template><div :style="{'padding-bottom':`${(safeAreaBottom*2)+144}`+'rpx'}"><div style="padding: 32rpx 32rpx 50rpx;"><div class="margin-bottom-sm txt-1">成功蜕变历程</div><div class="toplicheng flex justify-center align-center margin-bottom-sm"><div class="flex flex-direction align-center"><div class="flex align-center"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/caseDetailIcON2.png" dMode="aspectFit" dWidth="32rpx" dHeight="32rpx"></d-image><div class="toptxt1 margin-left-xs">体重</div></div><div class="toptxt2 margin-top-xs">{{topweightcha||0}}kg</div></div><div class="midBox flex flex-direction align-center"><div class="xmonth flex justify-center align-center margin-bottom-xs">逆糖3个月</div><div class="topshuxian"></div></div><div class="flex flex-direction align-center"><div class="flex align-center"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/caseDetailIcON1.png" dMode="aspectFit" dWidth="32rpx" dHeight="32rpx"></d-image><div class="toptxt1 margin-left-xs">空腹血糖</div></div><div class="toptxt2 margin-top-xs">{{topxuetangcha||0}}mmol/L</div></div></div><!-- 案例信息 --><div class="caseBox"><div class="case-head-box flex justify-between align-center"><div class="head-left-box flex"><div class="avatarBox"><u-avatar :src="detailData.userInfoVo.userAvatar || 'https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/healthy.png'" size="72rpx" mode="aspectFill"></u-avatar></div><div><div class="txt-1 margin-bottom-xs">{{detailData.userInfoVo.userName||'暂无昵称'}}</div><div class="txt-2">{{detailData.isExistServicePack?detailData.servicePackVo.servicePackName:'暂无服务包'}}</div></div></div><div class=" flex justify-center align-center" style="width: 80rpx;height: 80rpx;"><u-icon name="share-square" color="" size="34rpx"></u-icon></div></div><div class="caseBoxContentBox"><u-row justify="space-start"><u-col span="4"><view class="txt-4 margin-bottom">项目</view></u-col><u-col span="4"><view class="txt-4 margin-bottom">管理前</view></u-col><u-col span="4"><view class="txt-4 margin-bottom">管理后</view></u-col></u-row><u-row justify="space-start"><u-col span="4"><view><div class="txt-3">服务时间</div></view></u-col><u-col span="4"><view><div class="startTime">{{detailData.managementInfoVo.managementStartTime||'--'}}</div></view></u-col><u-col span="4"><view><div class="endTime">{{detailData.managementInfoVo.managementEndTime||'--'}}</div></view></u-col></u-row><div class="line"></div><u-row justify="space-start"><u-col span="4"><view><div class="txt-3">体重</div><div class="txt-7">kg</div></view></u-col><u-col span="4"><view><div class="yellow-box flex justify-center align-center" style="position: relative;">{{detailData.managementInfoVo.beforeManagementWeight||'--'}}<div class="jiantou" v-if="detailData.managementInfoVo.beforeManagementFastingSugarBloodTrend===3"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/redUp.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx"></d-image></div><div class="jiantou" v-else-if="detailData.managementInfoVo.beforeManagementFastingSugarBloodTrend===1"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/greenDown.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx"></d-image></div></div></view></u-col><u-col span="4"><view><div class="green-box flex justify-center align-center">{{detailData.managementInfoVo.afterManagementWeight||'--'}}</div></view></u-col></u-row><div class="line"></div><u-row justify="space-start"><u-col span="4"><view><div class="txt-3">空腹血糖</div><div class="txt-7">mmol/L</div></view></u-col><u-col span="4"><view><div class="yellow-box flex justify-center align-center" style="position: relative;">{{detailData.managementInfoVo.beforeManagementFastingSugarBlood||'--'}}<div class="jiantou"v-if="detailData.managementInfoVo.beforeManagementWeightTrend===3||detailData.managementInfoVo.beforeManagementWeightTrend===4||detailData.managementInfoVo.beforeManagementWeightTrend===5"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/redUp.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx"></d-image></div><div class="jiantou" v-else-if="detailData.managementInfoVo.beforeManagementWeightTrend===1"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/greenDown.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx"></d-image></div></div></view></u-col><u-col span="4"><view><div class="green-box flex justify-center align-center">{{detailData.managementInfoVo.afterManagementFastingSugarBlood||'--'}}</div></view></u-col></u-row><div class="line"></div><u-row justify="space-start"><u-col span="4"><view><div class="txt-3">用药数量</div></view></u-col><u-col span="4"><view><div class="yellow-box flex justify-center align-center">{{detailData.managementInfoVo.beforeManagementMedicationCount||'0'}}</div></view></u-col><u-col span="4"><view><div class="green-box flex justify-center align-center">{{detailData.managementInfoVo.afterManagementMedicationCount||'0'}}</div></view></u-col></u-row><div class="line"></div><u-row justify="space-start"><u-col span="4"><view><div class="txt-3">对比照片</div></view></u-col><u-col span="4"><view><div class="margin-bottom-sm"><div><div v-if="detailData.managementInfoVo.beforeManagementImagePhoto===''" class="noPicBox flex justify-center align-center">暂无</div><div v-else><d-image :dSrc="detailData.managementInfoVo.beforeManagementImagePhoto" dMode="aspectFit" dWidth="140rpx" dHeight="140rpx"></d-image></div></div></div></view></u-col><u-col span="4"><view><div class="margin-bottom-sm"><div><div v-if="detailData.managementInfoVo.afterManagementImagePhoto===''" class="noPicBox flex justify-center align-center">暂无</div><div v-else><d-image :dSrc="detailData.managementInfoVo.afterManagementImagePhoto" dMode="aspectFit" dWidth="140rpx" dHeight="140rpx"></d-image></div></div></div></view></u-col></u-row></div></div><!-- 评价 --><div class="evaluateBox margin-top-sm margin-bottom-sm"><div class="margin-bottom-sm txt-1">健康评价</div><div class="margin-top-sm flex flex-wrap pingjiaBox"><view class="pingjiaDom"><div v-for="(item,index) in defaultPingjia" :key="item.id" class="flex "><div class="tag margin-right-sm flex align-center margin-bottom-sm" :style="{'background':item.styleBg}"><div style="height: 100%; " class="flex align-start margin-right-sm"><d-image :dSrc="item.styleIcon" dMode="aspectFit" dWidth="26rpx" dHeight="26rpx"></d-image></div><text :style="{'max-width': '544rpx','word-break': 'break-all','color':item.styleColor}">{{item.content}}</text></div></div></view></div></div><!-- echart --><!-- 	<div class="margin-bottom-sm" style="position: relative;overflow: hidden;" v-for="(item,index) in echartList" :key="index"><detailChart :echarType="item"></detailChart></div> --></div><!-- 评论 --><div style="padding: 0 32rpx 56rpx;background: #FFFFFF;"><div class="flex justify-between align-center"><div class="pingluntitle">{{detailData.interActionVo.commentCount||'0'}} 评论</div><div></div></div><div v-for="(item,index) in onePagePinglunList" :key="item.id" class="margin-bottom"><pinglun :ref="`pinglun-${item.levelOneCommentVo.id}`" :caseIdData="caseId" :data="item" :indexxx="index" @comment="goComment" @noLogin="sonNoLogin" @shouqi="shouqiTwoPinglun"></pinglun></div></div><div class="contentB">- 让每个人都能从知识中获得健康 -</div><!-- 底部评价评论点赞收藏 --><div class="pingjialikeBox flex justify-between align-center" :style="{'bottom':`${(safeAreaBottom*2)}`+'rpx'}"><div class="talksomething flex justify-center align-center" @click="openPinglun">说点什么吧</div><div class="flex justify-around" style="width: 428rpx;"><div class="flex align-center btn" @click="$u.throttle(clickLike, 500,true)"><div v-show="detailData.interActionVo.isCurrentUserLike===0"><u-icon name="heart" color="" size="34rpx"></u-icon></div><div v-show="detailData.interActionVo.isCurrentUserLike===1"><u-icon name="heart-fill" color="red" size="34rpx"></u-icon></div><text class="margin-left-xs">{{detailData.interActionVo.likeCount||'0'}}</text></div><div class="flex align-center btn" @click="$u.throttle(clickCollect, 500,true)"><div v-show="detailData.interActionVo.isCurrentUserCollection===0"><u-icon name="star" color="" size="34rpx"></u-icon></div><div v-show="detailData.interActionVo.isCurrentUserCollection===1"><u-icon name="star-fill" color="#ff991f" size="34rpx"></u-icon></div><text class="margin-left-xs">{{detailData.interActionVo.collectionCount||'0'}}</text></div><div class=" flex align-center btn"><u-icon name="chat" color="" size="34rpx"></u-icon><text class="margin-left-xs">{{detailData.interActionVo.commentCount||'0'}}</text></div></div></div><u-popup :show="talkShow" mode="bottom" :customStyle="{'width':'100%','border-radius':'8rpx'}" @close="popclosed" @open="keyboard=true" :safeAreaInsetBottom="true"><view class="flex justify-between align-center" style="padding: 32rpx;"><div class="cirbOX padding-left padding-right-sm"><u--form labelPosition="left" :model="talkData" :rules="Rules" ref="Form" :borderBottom="false"><u-form-item label=" " prop="txt" :borderBottom="false" ref="item1" labelWidth='0'><u--input :focus="keyboard" v-model="talkData.txt" cursorSpacing="30" maxlength="100" :placeholder="pinglunHolder" border="none" clearable></u--input></u-form-item></u--form></div><div class="submitpinglun" @click="submit">发布</div></view></u-popup><u-modal title="确认登录" :show="show1" width="608rpx" content="为了您的良好体验,建议您先确认登录 ~" :closeOnClickOverlay="true" @close="show1=false"><u-button slot="confirmButton" text="确定" shape="circle" color="#00875A" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :customStyle="{'width':'264rpx','height':'68rpx'}"></u-button></u-modal><u-toast ref="uToast"></u-toast></div>
</template><script>import { mapState } from 'vuex';import detailChart from "./detailEchart.vue"import pinglun from "./pinglun.vue"import { sub } from '@/utils/tool.js'import { getDetail, getCurveModule, collection, like, savecomment, getLevelOnePage } from '@/api/case/case.js'export default {data() {return {show1: false,keyboard: false,pinglunHolder: '说点什么吧',Rules: {'txt': [{required: true,type: 'any',message: '评论不能为空',trigger: ['blur', 'change']},{validator: (rule, value, callback) => {return value.length < 100;},message: '您评论的字数超过100,请调整您的字数~',trigger: ['blur', 'change']}],},talkShow: false,talkData: { //弹框form值 评论txt: ""},caseId: null,echartList: [],detailData: {},defaultPingjia: [],topweightcha: null,topxuetangcha: null,pinglunForm: { //接口参数caseId: null,caseLevelOneCommentId: '', //对一级评论进行回复时不可为空caseLevelTwoCommentId: '', //对二级评论进行回复时不可为空content: null,userId: null,},params: {current: 1,limit: 5,likeSort: 2, //点赞数排序 1：升序 2：降序timeSort: 2, //创建时间排序 1：升序 2：降序},totalPage: 1,onePagePinglunList: [],pinglunType: null, //判断用户评论的类型是案例评论（3）还是一级评论（1）还是二级评论（2）erpinglunIndex: 0, //暂存二级评论发送给父级组件给的一级评论的index}},components: { detailChart, pinglun },computed: {...mapState(["hasLogin", "safeAreaBottom", "userInfo", ])},// 发送给朋友onShareAppMessage(res) {return {title: '妙智健康案例',path: `/pages-caseStory/caseDetail/index?caseId=${this.caseId}&title=${this.detailData.userInfoVo.userName}`}},//分享到朋友圈onShareTimeline(res) {return {title: '妙智健康案例',query: `caseId=${this.caseId}&title=${this.detailData.userInfoVo.userName}`,path: `/pages-caseStory/caseDetail/index` //自定义路径拼参数会导致接收参数会失败}},onReady() {},onLoad(option) {this.$refs.Form.setRules(this.Rules)this.caseId = option?.caseIduni.setNavigationBarTitle({title: `${option.title||''}案例`});this.getdetailData()this.getLevelOnePageData()},onUnload() {// this.$store.commit('set_caseShareEchartPicList', [])},onShow() {},methods: {sub,async getPhoneNumber(e) {// console.log("获取手机号code", e) //获取手机号已经不需要先进行wx.login（最新文档）if (!e.detail.code) {uni.showToast({title: '登录需要获取您的手机号',icon: 'none',duration: 2500})return}let resss = await this.$store.dispatch("loginFn", e) //能同步拿到vux中mutaion的resolve，然后给fourDataNum赋值（登录后数据更新）console.log(resss);if (resss.state === 1) { //登录成功this.show1 = false}},async getdetailData() {uni.showLoading({title: '加载中...'})try {let res = await getDetail({caseId: this.caseId,userId: this.hasLogin ? this.userInfo?.userId : ''})let echarRes = await getCurveModule({caseId: this.caseId,})if (res.state === 1) {this.detailData = res.contentthis.defaultPingjia = res.content.personnelEvaluationVoListthis.topweightcha = this.sub(this.detailData.managementInfoVo.afterManagementWeight, this.detailData.managementInfoVo.beforeManagementWeight)this.topxuetangcha = this.sub(this.detailData.managementInfoVo.afterManagementFastingSugarBlood, this.detailData.managementInfoVo.beforeManagementFastingSugarBlood)}if (echarRes.state === 1) {this.echartList = echarRes.content.map(item => {let obj = {title: item.caseCurveType === 1 ? '硅基' : (item.caseCurveType === 2 ? "微策" : "体重"),defaultTime: item.caseCurveType === 1 ? item.curveStartDate : [item.curveStartDate, item.curveEndDate],userId: res.content.userInfoVo.userId}return obj})}uni.hideLoading();} catch (e) {uni.hideLoading();uni.$u.toast(e)}},async clickLike(item, index) {if (!this.hasLogin) {this.show1 = truereturn}try {let res = await like({userId: this.userInfo?.userId,caseId: this.caseId,})if (res.state === 1) {if (this.detailData.interActionVo.isCurrentUserLike === 1) {this.detailData.interActionVo.isCurrentUserLike = 0this.detailData.interActionVo.likeCount--} else if (this.detailData.interActionVo.isCurrentUserLike === 0) {this.detailData.interActionVo.isCurrentUserLike = 1this.detailData.interActionVo.likeCount++}}} catch (e) {uni.$u.toast(e)}},async clickCollect(item) {if (!this.hasLogin) {this.show1 = truereturn}try {let res = await collection({userId: this.userInfo?.userId,caseId: this.caseId,})if (res.state === 1) {if (this.detailData.interActionVo.isCurrentUserCollection === 1) {this.detailData.interActionVo.isCurrentUserCollection = 0this.detailData.interActionVo.collectionCount--} else if (this.detailData.interActionVo.isCurrentUserCollection === 0) {this.detailData.interActionVo.isCurrentUserCollection = 1this.detailData.interActionVo.collectionCount++}}} catch (e) {uni.$u.toast(e)}},popclosed() {this.talkData.txt = ''this.keyboard = falsethis.talkShow = falseconsole.log(this.keyboard);},async getLevelOnePageData() {uni.showLoading({title: '加载中...'})try {let res = await getLevelOnePage({ userId: this.hasLogin ? this.userInfo?.userId : '', caseId: Number(this.caseId), ...this.params })if (res.state === 1) {for (let i = 0; i < res.content.records.length; i++) {res.content.records[i].twoLevelpinglun = []if (this.onePagePinglunList.some(item => item.levelOneCommentVo.id === res.content.records[i].levelOneCommentVo.id)) { //删除重复项res.content.records.splice(i, 1)}}this.onePagePinglunList = [...this.onePagePinglunList, ...res.content.records]this.totalPage = Math.ceil(res.content.total / this.params.limit) //总页数=总数量/每页数量}uni.hideLoading();} catch (e) {uni.hideLoading();uni.$u.toast(e)}},openPinglun() {if (!this.hasLogin) {this.show1 = truereturn}this.pinglunType = 3 //案例评论this.pinglunHolder = '说点什么吧'this.pinglunForm.caseLevelOneCommentId = '' //不回复一二级评论时候置空该字段this.pinglunForm.caseLevelTwoCommentId = '' //不回复一二级评论时候置空该字段this.talkShow = true// this.keyboard = true},goComment(e) { //处理回复一级二级评论  案例的顶级评论在openPinglun()函数中console.log(e);this.pinglunType = e.type //评论类型console.log('this.pinglunType', this.pinglunType);if (e.type === 1) { //一级评论this.pinglunForm.caseLevelOneCommentId = e.idthis.erpinglunIndex = e.indexthis.pinglunHolder = `回复 @${e.replyName}`} else if (e.type === 2) { //二级评论this.pinglunForm.caseLevelTwoCommentId = e.idthis.erpinglunIndex = e.indexthis.pinglunHolder = `回复 @${e.replyName}`}console.log("点击的item", this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList);this.talkShow = true// this.keyboard = trueconsole.log(this.keyboard);},async submit() {this.pinglunForm.userId = this.userInfo.userIdthis.pinglunForm.content = this.talkData.txtthis.pinglunForm.caseId = this.caseId// let form = {// 	caseId: this.caseId,// 	caseLevelOneCommentId: '', //对一级评论进行回复时不可为空// 	caseLevelTwoCommentId: '', //对二级评论进行回复时不可为空// 	content: this.talkData.txt,// 	userId: this.userInfo.userId,// }try {let res = await savecomment(this.pinglunForm)if (res.state === 1) {if (this.pinglunType === 3) { //案例评论this.onePagePinglunList.unshift({twoLevelpinglun: [],...res.content.caseCommentHomeVo})this.$forceUpdate();this.$nextTick(() => {for (let i = 0; i < this.onePagePinglunList.length; i++) {this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].updatHeight() //重置子组件内部height 不管新增一级还是二级都需要全部重置高度不然会出现bugif (this.onePagePinglunList[i].twoLevelpinglun.length === 0) {this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].params.current = 1}}console.log(this.$refs[`pinglun-${127}`][0].onePageList);})this.$forceUpdate();} else if (this.pinglunType === 1 || this.pinglunType === 2) { //回复一级评论或二级评论  push完需要注意的是在获取分页数据时候去重，因为这个push操作是模拟更新数据，后端并不知晓所以后端未做去重console.log(this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglun);this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglun.push({...res.content.caseLevelTwoCommentVo})console.log(this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglun);let indxx;for (let i = 0; i < this.onePagePinglunList.length; i++) {if (this.onePagePinglunList[i].levelOneCommentVo.id === this.erpinglunIndex) {indxx = ibreak}}// 目的是防止发表一级评论之后父级向下重新注入数据，会触发pinglun组件内部的watch，导致会重置组件内部的twoLevelpinglun为[],this.onePagePinglunList[indxx].twoLevelpinglun = this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglunthis.onePagePinglunList[indxx].levelTwoCommentCount++this.$refs[`pinglun-${this.erpinglunIndex}`][0].updatHeight() //重置子组件内部height}this.talkData.txt = '' //重置评论this.keyboard = false //自动聚焦设为falsethis.talkShow = false //关闭弹窗this.updatePinglunNum() //更新评论数量console.log(this.keyboard);this.$refs.uToast.show({type: 'success',message: "已发送评论~",duration: 1200,})}} catch (e) {uni.$u.toast(e)}},sonNoLogin(e) {console.log(e);if (!this.hasLogin) {this.show1 = truereturn}},async updatePinglunNum() {try {let res = await getDetail({caseId: this.caseId,userId: this.hasLogin ? this.userInfo?.userId : ''})if (res.state === 1) {this.detailData = res.content}} catch (e) {uni.$u.toast(e)}},//因为每次发表二级评论都会往父级的twoLevelpinglun添加属性，也就是submit函数里面的565行代码，会导致一个bug 就是发布二级评论后，// 因为同时给父级也赋值了，故收起二级评论后，再发表一级评论，重置了了渲染，会将父级被赋值的twoLevelpinglun同步到二级评论的twoLevelpinglun，相当于之前收起操作白重置了twoLevelpinglunshouqiTwoPinglun(index) {let indxx;for (let i = 0; i < this.onePagePinglunList.length; i++) {if (this.onePagePinglunList[i].levelOneCommentVo.id === index) {indxx = ibreak}}this.onePagePinglunList[indxx].twoLevelpinglun = []},},// 上拉加载async onReachBottom() {if (this.params.current > this.totalPage) {this.$refs.uToast.show({type: 'warning',message: "已经到底啦~",duration: 1200,})return}this.params.current += 1await this.getLevelOnePageData()uni.stopPullDownRefresh() //停止上拉加载},// 下拉刷新触发async onPullDownRefresh() {this.params.current = 1 //重置页码this.onePagePinglunList = []await this.getLevelOnePageData()this.$refs.uToast.show({type: 'success',message: "刷新成功",duration: 1200,})uni.stopPullDownRefresh() //停止下拉刷新},}
</script><style lang="scss" scoped>@import '@/pages-caseStory/style/caseCommon.scss';.pingluntitle {font-size: 28rpx;font-family: PingFangSC;color: #1F3253;height: 90rpx;line-height: 90rpx;}.contentB {margin: 42rpx 0;font-size: 24rpx;font-weight: 400;color: #667286;text-align: center;}.pingjialikeBox {padding: 32rpx;width: 100%;height: 144rpx;background: #FFFFFF;position: fixed;left: 0;.btn {height: 70rpx;width: 78rpx;}}.toplicheng {height: 160rpx;background: linear-gradient(47deg, rgba(23, 144, 109, 0.84) 0%, #5DC063 100%);border-radius: 12rpx;}.topshuxian {width: 1rpx;height: 80rpx;opacity: 0.5;border: 2rpx solid #FFFFFF;}.xmonth {width: 156rpx;height: 47rpx;background: #FFFFFF;border-radius: 0rpx 0rpx 14rpx 14rpx;opacity: 0.8;font-size: 24rpx;font-weight: 400;color: #00875A;}.toptxt1 {font-size: 28rpx;font-weight: 400;color: #FFFFFF;}.toptxt2 {font-size: 36rpx;font-weight: bold;color: #E2FFF5;}.midBox {width: 156rpx;height: 160rpx;margin-left: 70rpx;margin-right: 23rpx;}.noPicBox {width: 140rpx;height: 140rpx;background: #E7EFF6;}.jiantou {position: absolute;top: 0;right: 0;}.evaluateBox {background: #FFFFFF;border-radius: 12rpx;padding: 40rpx 32rpx 78rpx;.tag {background: #FFF6E9;border-radius: 30rpx;padding: 20rpx 30rpx 20rpx 20rpx;vertical-align: center;}}.talksomething {width: 248rpx;height: 80rpx;background: #F4F5F7;border-radius: 40rpx;font-size: 28rpx;font-weight: 400;color: #697588;}.cirbOX {width: 600rpx;height: 80rpx;background: #F4F5F7;border-radius: 40rpx;}.submitpinglun {height: 80rpx;width: 64rpx;font-size: 32rpx;font-weight: 500;color: #00875A;line-height: 80rpx;}
</style>

pinglun组件：

<template><div><!-- 一级评论 --><div class="flex justify-start align-start margin-bottom-sm"><div class="margin-right-xs"><d-image :dSrc="onePageList.levelOneCommentVo.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx"></d-image></div><div class="flex-sub"><div class="flex justify-start align-center"><div class="name margin-right-sm">{{onePageList.levelOneCommentVo.userName}}</div><div class="zuozhe flex justify-center align-center" v-if="onePageList.levelOneCommentVo.belongAuthor===1">作者</div></div><div class="flex justify-between align-center" @click="goPinglun(1,onePageList.levelOneCommentVo.id,onePageList.levelOneCommentVo.userName,onePageList.levelOneCommentVo.id)"><div class="content flex-sub">{{onePageList.levelOneCommentVo.content}}</div><div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(1,'',onePageList.levelOneCommentVo.id)"><div class="margin-bottom-xs"><div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===0"><u-icon name="heart" color="#667286" size="34rpx"></u-icon></div><div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===1"><u-icon name="heart-fill" color="red" size="34rpx"></u-icon></div></div><div class="likeNum">{{onePageList.levelOneCommentVo.likeCount}}</div></div></div><div class="time">{{ $u.timeFrom(new Date(onePageList.levelOneCommentVo.createTime).getTime())}}</div></div></div><!-- 二级评论 --><div class="erpinglunBox" :style="{'height':`${pingjiaBoxMaxHeight}px`,'opacity':pinglunOpcity,}"><div class="pinglunDom"><div v-for="(item,index) in onePageList.twoLevelpinglun" :key="item.id" class="margin-bottom-sm"><div class="flex justify-start align-start"><div class="margin-right-xs"><d-image :dSrc="item.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx"></d-image></div><div class="flex-sub"><div class="flex justify-start align-center"><div class="name margin-right-sm">{{item.userName}}</div><div class="zuozhe flex justify-center align-center margin-right-sm" v-if="item.belongAuthor===1">作者</div><div class="name" v-if="item.isReplayTwoComment===1">回复 {{item.replayLevelTwoCommentUser.userName}}</div></div><div class="flex justify-between align-center" @click="goPinglun(2,item.id,item.userName,onePageList.levelOneCommentVo.id)"><div class="content flex-sub">{{item.content}}</div><div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(2,index,item.id)"><div class="margin-bottom-xs"><div v-show="item.isCurrentUserLike===0"><u-icon name="heart" color="#667286" size="34rpx"></u-icon></div><div v-show="item.isCurrentUserLike===1"><u-icon name="heart-fill" color="red" size="34rpx"></u-icon></div></div><div class="likeNum">{{item.likeCount}}</div></div></div><div class="time">{{ $u.timeFrom(new Date(item.createTime).getTime())}}</div></div></div></div></div></div><!-- 展开和收起按钮 --><div class="flex justify-start align-center" style="padding-left: 84rpx;"><div class="seeMore padding-top-sm padding-bottom flex align-center" v-if="onePageList.levelTwoCommentCount > 0&&params.current <= totalPage" @click="$u.throttle(getTwoLevelPinglun, 1000,true)"><div class="margin-right-xs">查看更多回复</div><u-icon name="arrow-down" color="#00875A" size="28rpx" :bold="true"></u-icon></div><div class="seeMore retract padding-top-sm padding-bottom margin-left flex justify-center align-center" v-if="params.current > 1" @click="$u.throttle(retract, 1000,true)"><div class="margin-right-xs">收起</div><u-icon name="arrow-up" color="#00875A" size="28rpx" :bold="true"></u-icon></div></div></div>
</template><script>import { mapState } from 'vuex';import { commentlike, getLevelOnePage, getLevelTwoPage } from '@/api/case/case.js'export default {data() {return {caseId: null,indexxxx: null, //一级评论的indexparams: {current: 1,limit: 5,timeSort: 1, //创建时间排序 1：升序 2：降序},totalPage: 1,onePageList: {},pingjiaBoxMaxHeight: 0,pinglunOpcity: 0,timer: null,timer1: null,}},props: {caseIdData: {type: Number,// 定义是否必须传required: true,// 定义默认值default: 0},data: {type: Object,// 定义是否必须传required: true,// 定义默认值default: {}},indexxx: {type: Number,// 定义是否必须传required: true,// 定义默认值default: 0}},watch: {caseIdData: {immediate: true,handler(val) {this.caseId = val;}},data: {immediate: true,handler(val) {this.onePageList = val;}},indexxx: {immediate: true,handler(val) {this.indexxxx = val;}}},components: {},computed: {...mapState(["hasLogin", "userInfo"])},mounted() {},beforeDestroy() {clearTimeout(this.timer)clearTimeout(this.timer1)},methods: {async likepinglun(type, index, id) {if (!this.hasLogin) {this.$emit('noLogin', '一二级评论点赞未登录')return}let form = {};if (type === 1) {form.caseLevelOneCommentId = id} else if (type === 2) {form.caseLevelTwoCommentId = id}try {let res = await commentlike({ ...form, userId: this.userInfo?.userId })if (res.state === 1) { //如果接口回调成功if (type === 1) { //如果点击的是一级评论的点赞if (this.onePageList.levelOneCommentVo.isCurrentUserLike === 0) { //判断点赞之前是0还是1 然后取反  并且对应点赞数量同步加减this.onePageList.levelOneCommentVo.isCurrentUserLike = 1this.onePageList.levelOneCommentVo.likeCount++} else if (this.onePageList.levelOneCommentVo.isCurrentUserLike === 1) {this.onePageList.levelOneCommentVo.isCurrentUserLike = 0this.onePageList.levelOneCommentVo.likeCount--}} else if (type === 2) { //如果点击的是二级评论的点赞if (this.onePageList.twoLevelpinglun[index].isCurrentUserLike === 0) {this.onePageList.twoLevelpinglun[index].isCurrentUserLike = 1this.onePageList.twoLevelpinglun[index].likeCount++} else if (this.onePageList.twoLevelpinglun[index].isCurrentUserLike === 1) {this.onePageList.twoLevelpinglun[index].isCurrentUserLike = 0this.onePageList.twoLevelpinglun[index].likeCount--}}}} catch (e) {uni.$u.toast(e)}},goPinglun(e, id, name, indexx) {if (e === 1) { //一级评论this.$emit('comment', {type: e,id: id,// index: this.indexxxx,index: indexx,replyName: name, //点击的谁的评论进行回复，用于在输入框的placeholder回显})} else if (e === 2) { //二级评论this.$emit('comment', {type: e,id: id,// index: this.indexxxx,index: indexx,replyName: name, //点击的谁的评论进行回复，用于在输入框的placeholder回显})}},async getTwoLevelPinglun() {try {let res = await getLevelTwoPage({ userId: this.hasLogin ? this.userInfo?.userId : '', caseLevelOneCommentId: this.onePageList.levelOneCommentVo.id, ...this.params })if (res.state === 1) {for (let i = 0; i < res.content.records.length; i++) {res.content.records[i].twoLevelpinglun = []if (this.onePageList.twoLevelpinglun.some(item => item.id === res.content.records[i].id)) { //删除重复项res.content.records.splice(i, 1)console.log("发现重复项，删除他！！！");}}this.onePageList.twoLevelpinglun = [...this.onePageList.twoLevelpinglun, ...res.content.records]this.totalPage = Math.ceil(res.content.total / this.params.limit) //总页数=总数量/每页数量this.params.current += 1this.updatHeight()}} catch (e) {uni.$u.toast(e)}},retract() {this.pingjiaBoxMaxHeight = 0this.pinglunOpcity = 0this.params.current = 1this.onePageList.twoLevelpinglun = []this.timer1 = setTimeout(() => { //因为展开动画需要1s 故 在收起的时候延迟置空数组，console.log(this.onePageList);this.$emit('shouqi', this.onePageList.levelOneCommentVo.id)}, 800)},updatHeight() {let that = thisthis.$nextTick(() => {// this.timer = setTimeout(() => {this.createSelectorQuery().select(".pinglunDom").boundingClientRect(function(rect) {// console.log(rect);that.pingjiaBoxMaxHeight = rect.heightthat.pinglunOpcity = 1}).exec();// }, 0)})},}}
</script><style lang="scss" scoped>.name {font-size: 24rpx;font-weight: 400;color: #667286;}.content {font-size: 28rpx;font-weight: 400;color: #1F3253;}.time {font-size: 20rpx;font-weight: 400;color: #AFAFAF;}.likeNum {font-size: 20rpx;font-weight: 400;color: #667286;}.zuozhe {width: 60rpx;height: 28rpx;background: #FFFFFF;border-radius: 18rpx;border: 1rpx solid #00875A;font-size: 20rpx;font-weight: 400;color: #00875A;}.seeMore {font-size: 24rpx;font-weight: 400;color: #00875A;}.retract {width: 150rpx;text-align: center;}.erpinglunBox {padding-left: 84rpx;transition: height 1s, opacity 2s;overflow: hidden;}
</style>

案例详情引入的scss文件：

	.font-20 {font-size: 20rpx;font-weight: 400;}.font-24 {font-size: 24rpx;font-weight: 400;}.txt-1 {font-size: 28rpx;font-weight: 500;color: #0F2C50;}.txt-2 {@extend .font-20;color: #667286;}.txt-3 {@extend .font-24;color: #667286;}.txt-4 {font-size: 24rpx;font-weight: 500;color: #667286;}.txt-5 {font-size: 36rpx;font-weight: bold;}.txt-6 {@extend .font-24;color: #9CADC6;}.txt-7 {@extend .font-20;color: #B7BCC3;}.txt-8 {@extend .font-24;color: #fff;}.txt-9 {@extend .font-24;color: #0F2C50;}.txt-10 {font-size: 28rpx;font-weight: 400;color: #667286;}.yell-green-base {width: 140rpx;height: 52rpx;border-radius: 2rpx;font-size: 36rpx;font-weight: bold;}.yellow-box {@extend .yell-green-base;background-color: #FFF4CD;color: #FF991F;}.green-box {@extend .yell-green-base;background: #E2FFEE;color: #00875A;}.timeFont{font-size: 32rpx;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;}.startTime{@extend .timeFont;color: #FF991F;}.endTime{@extend .timeFont;color: #00875A;}.line {height: 1rpx;border: 1rpx solid #E6E6E6;margin: 16rpx 0;}
.caseBox {background: #FFFFFF;border-radius: 12rpx;margin-top: 20rpx;padding: 0 32rpx;.case-head-box {height: 140rpx;}.avatarBox {width: 72rpx;height: 72rpx;margin-right: 16rpx;}.caseDetailBtn {width: 100rpx;height: 44rpx;background: #00875A;border-radius: 22rpx;}.rateBox {height: 80rpx;}.mar-80 {margin-right: 80rpx;}}

这篇关于uniapp 微信小程序仿抖音评论区功能，支持展开收起的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！