talk
/
talk_appAmin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成评论区样式、子评论展开逻辑

main
Connor 2024-06-09 17:08:02 +08:00
parent f76e47e845
commit 95ab7480bd
4 changed files with 117 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
pages/index.vue
View File

@ -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,20 +132,23 @@ import {onReachBottom,onLoad,onPageScroll} from "@dcloudio/uni-app";
import PostView from "@/pages/common/postview/index.vue";
const bgColor = ref('rgba(170, 0, 0, 0)');
onPageScroll((e) => {
// console.log("滚动距离为：" + e.scrollTop);
if (e.scrollTop >= 70) {
bgColor.value = 'rgba(255, 255, 255, 1)'
} else {
bgColor.value = 'rgba(170, 0, 0, 0)'
}
onMounted(() => {
onPageScroll((e) => {
// console.log("滚动距离为：" + e.scrollTop);
if (e.scrollTop >= 70) {
bgColor.value = 'rgba(255, 255, 255, 1)'
} else {
bgColor.value = 'rgba(170, 0, 0, 0)'
}
});
onReachBottom(() => {
console.log('触底了')
})
})
const { proxy } = getCurrentInstance();
onReachBottom(() => {
console.log('触底了')
})
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");
}

111
pages/post/postInfo/postInfo.vue
View File

@ -34,17 +34,20 @@
</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>
<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">{{answer.toUserName}}</text>
<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> -->
<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>
@ -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>

BIN
static/images/icon/deployment-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 611 B

BIN
static/images/icon/ring-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 B