完成评论区样式、子评论展开逻辑
parent
f76e47e845
commit
95ab7480bd
|
|
@ -17,7 +17,7 @@
|
|||
</template>
|
||||
<template class="img2Box" #center>
|
||||
<view class="qiehuanBox">
|
||||
<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4"
|
||||
<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4" :scrollable="false"
|
||||
:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}"
|
||||
:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
|
||||
:list="list1" :current="viewIndex" @click="click"></u-tabs>
|
||||
|
|
@ -132,8 +132,7 @@ import {onReachBottom,onLoad,onPageScroll} from "@dcloudio/uni-app";
|
|||
import PostView from "@/pages/common/postview/index.vue";
|
||||
|
||||
const bgColor = ref('rgba(170, 0, 0, 0)');
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
onPageScroll((e) => {
|
||||
// console.log("滚动距离为：" + e.scrollTop);
|
||||
if (e.scrollTop >= 70) {
|
||||
|
|
@ -141,11 +140,15 @@ import PostView from "@/pages/common/postview/index.vue";
|
|||
} else {
|
||||
bgColor.value = 'rgba(170, 0, 0, 0)'
|
||||
}
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
});
|
||||
onReachBottom(() => {
|
||||
console.log('触底了')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
|
||||
const viewIndex = ref(1);
|
||||
const searchOpen = ref(false);
|
||||
|
|
@ -312,12 +315,6 @@ import PostView from "@/pages/common/postview/index.vue";
|
|||
searchOpen.value = !searchOpen.value;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
console.log(proxy.$store.state.user.QNDomain);
|
||||
});
|
||||
|
||||
|
||||
|
||||
function GotoUNISignid(){
|
||||
proxy.$tab.navigateTo("/pages/signln/signid");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,18 +34,21 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="" v-if="item.answerCommentList.length != 0">
|
||||
<text v-if="!item.isDeployment" class="deploymentAnswer-text" @click="deploymentAnswer(index)">---展开回复</text>
|
||||
<view v-if="item.isDeployment" class="have-comment-answer" v-for="answer in item.answerCommentList" :key="answer">
|
||||
<view v-if="item.isDeployment" class="have-comment-answer" v-for="answer in item.answerCommentList.slice(0,item.answerCommentDisplayCount)" :key="answer">
|
||||
<view class="flex alignCenter">
|
||||
<!-- 头像 -->
|
||||
<view class="have-comment-answer-avatar-container">
|
||||
<u-avatar class="have-comment-answer-avatar-1" size="48rpx" :src="answer.avatar"></u-avatar>
|
||||
<image v-if="answer.isOfficial" class="have-comment-answer-official-1" src="../../../static/images/icon/tu3-6.png"></image>
|
||||
</view>
|
||||
<view class="flex alignCenter justifyBetween">
|
||||
<text class="have-comment-answer-uname">{{answer.uname}}</text>
|
||||
<text v-if="answer.toUserName" class="have-comment-answer-uname">-></text>
|
||||
<!-- <text v-if="answer.toUserName" class="have-comment-answer-uname">-></text> -->
|
||||
<image v-if="answer.toUserName" class="have-comment-answer-uname-img" src="../../../static/images/icon/ring-1.png"></image>
|
||||
<text v-if="answer.toUserName" class="have-comment-answer-uname">{{answer.toUserName}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="have-comment-answer-content">
|
||||
<text class="have-comment-answer-content-text-1">{{answer.content}}</text>
|
||||
<view class="have-comment-answer-content-text-2">
|
||||
|
|
@ -54,7 +57,21 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="item.isDeployment" class="deploymentAnswer-text" @click="putAnswer(index)">---收起</text>
|
||||
<view class="have-comment-answer-deploy flex alignCenter">
|
||||
<up-line class="have-comment-answer-line" length="40rpx"></up-line>
|
||||
<view class="have-comment-answer-deploy-1 flex alignCenter" v-if="!item.isDeployment">
|
||||
<text class="deploymentAnswer-text" @click="deploymentAnswer(index)">展开{{item.answerCommentAllCount}}条回复</text>
|
||||
<image class="have-comment-answer-img-1" src="../../../static/images/icon/deployment-1.png" mode=""></image>
|
||||
</view>
|
||||
<view class="have-comment-answer-deploy-1 flex alignCenter" v-if="item.isDeployment && item.answerCommentDisplayCount < item.answerCommentAllCount">
|
||||
<text class="deploymentAnswer-text" @click="loadMoreAnswers(index)">展开回复</text>
|
||||
<image class="have-comment-answer-img-1" src="../../../static/images/icon/deployment-1.png" mode=""></image>
|
||||
</view>
|
||||
<view class="have-comment-answer-deploy-1 flex alignCenter" v-if="item.isDeployment">
|
||||
<text class="deploymentAnswer-text" @click="putAnswer(index)">收起</text>
|
||||
<image class="have-comment-answer-img-2" src="../../../static/images/icon/deployment-1.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -79,7 +96,7 @@
|
|||
<!-- <view class="flex justifyCenter"> -->
|
||||
<view class="flex alignCenter justifyCenter">
|
||||
<view class="flex justifyCenter alignCenter commentInput" @click="toInput()">
|
||||
<image class="commentInput-img" src="../../../static/images/icon/write-1.png" mode=""></image>
|
||||
<image class="commentInput-img-1" src="../../../static/images/icon/write-1.png" mode=""></image>
|
||||
<text class="commentInput-text">友好评论~</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -93,11 +110,11 @@
|
|||
<text class="commentInput-txt">{{postValue.likeCount}}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="postValue.ifFavorite" @click.stop="cancelFavorite()" class="flex alignCenter justifyCenter flexColumn">
|
||||
<view v-if="postValue.ifFavorite" @click.stop="cancelFavorite()" class="flex flexColumn alignCenter justifyCenter ">
|
||||
<image class="commentInput-img" src="../../../static/images/icon/tu3-2.png" mode=""></image>
|
||||
<text class="commentInput-txt-favorite">{{postValue.favoriteCount}}</text>
|
||||
</view>
|
||||
<view v-if="!postValue.ifFavorite" @click.stop="addFavorite()" class="flex alignCenter justifyCenter flexColumn">
|
||||
<view v-if="!postValue.ifFavorite" @click.stop="addFavorite()" class="flex flexColumn alignCenter justifyCenter ">
|
||||
<image class="commentInput-img" src="../../../static/images/icon/tu3-1.png" mode=""></image>
|
||||
<text class="commentInput-txt">{{postValue.favoriteCount}}</text>
|
||||
</view>
|
||||
|
|
@ -112,12 +129,13 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
|
||||
import {onReachBottom,onLoad,onPageScroll} from "@dcloudio/uni-app";
|
||||
import PostView from "@/pages/common/postview/index.vue";
|
||||
|
||||
const bottomVal = ref(0);
|
||||
|
||||
// 监听键盘高度变化
|
||||
onMounted(async () => {
|
||||
onLoad(() => {
|
||||
// if (!data.value) {
|
||||
uni.onKeyboardHeightChange(res => {
|
||||
if(res.height == 0) {
|
||||
|
|
@ -143,6 +161,9 @@
|
|||
createTime: '7分钟前',
|
||||
isOfficial: true,
|
||||
isDeployment: false,
|
||||
answerCommentAllCount: 4,
|
||||
answerCommentPage: 0,
|
||||
answerCommentDisplayCount: 0,
|
||||
answerCommentList: [{
|
||||
avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
|
||||
uname: '恋爱60秒',
|
||||
|
|
@ -160,6 +181,24 @@
|
|||
content: '你干嘛～',
|
||||
toUserName: '恋爱60秒',
|
||||
},
|
||||
{
|
||||
avatar: 'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
|
||||
uname: '神奇宝贝',
|
||||
createTime: '2024.05.04',
|
||||
isOfficial: false,
|
||||
address: '理工大学',
|
||||
content: '哎呦～',
|
||||
toUserName: '喜欢你没道理',
|
||||
},
|
||||
{
|
||||
avatar: 'https://files.codelife.cc/wallhaven/full/wq/wallhaven-wqkw2r.jpg?x-oss-process=image/resize,limit_0,m_fill,w_307,h_158/quality,Q_92/format,webp',
|
||||
uname: '皮卡丘',
|
||||
createTime: '2024.05.04',
|
||||
isOfficial: true,
|
||||
address: '理工大学',
|
||||
content: '要再点一下才能看到我',
|
||||
toUserName: '喜欢你没道理',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -254,11 +293,25 @@
|
|||
|
||||
const deploymentAnswer = (index) => {
|
||||
postList[index].isDeployment = true;
|
||||
loadMoreAnswers(index);
|
||||
};
|
||||
|
||||
const putAnswer = (index) => {
|
||||
postList[index].isDeployment = false;
|
||||
postList[index].answerCommentDisplayCount = 0;
|
||||
postList[index].answerCommentPage = 0;
|
||||
};
|
||||
|
||||
const loadMoreAnswers = (index) => {
|
||||
const increment = 3; // 每次加载的评论数量
|
||||
const comment = postList[index];
|
||||
if (comment.answerCommentDisplayCount + increment <= comment.answerCommentAllCount) {
|
||||
comment.answerCommentDisplayCount += increment;
|
||||
} else {
|
||||
comment.answerCommentDisplayCount = comment.answerCommentAllCount; // 显示所有剩余的评论
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -347,6 +400,11 @@ page{
|
|||
}
|
||||
|
||||
.commentInput-img{
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
// margin-right: 12rpx;
|
||||
}
|
||||
.commentInput-img-1{
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 12rpx;
|
||||
|
|
@ -484,7 +542,6 @@ page{
|
|||
}
|
||||
|
||||
.deploymentAnswer-text{
|
||||
margin-left: 80rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
|
@ -528,5 +585,37 @@ page{
|
|||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.have-comment-answer-deploy{
|
||||
margin-top: 30rpx;
|
||||
margin-left: 80rpx;
|
||||
}
|
||||
|
||||
.have-comment-answer-line{
|
||||
}
|
||||
|
||||
.have-comment-answer-img-1{
|
||||
width: 26rpx;
|
||||
height: 14rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.have-comment-answer-img-2{
|
||||
width: 26rpx;
|
||||
height: 14rpx;
|
||||
margin-left: 12rpx;
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.have-comment-answer-deploy-1{
|
||||
margin-left: 12rpx;
|
||||
margin-right: 130rpx;
|
||||
}
|
||||
|
||||
.have-comment-answer-uname-img{
|
||||
width: 14rpx;
|
||||
height: 24rpx;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 611 B |
Binary file not shown.
|
After Width: | Height: | Size: 242 B |
Loading…
Reference in New Issue