仿B站的视频评论列表

1.使用页面部分

HTML

<div style="height: 500px" class="commentList"  v-infinite-scroll="getMore" infinite-scroll-immediate="false" ref="backTop"><Comment :comments="commentList"></Comment><div class="noMore" v-if="this.queryData.pageNum > this.allPages">没有更多评论</div><div class="back-top" v-if="queryData.pageNum > 1" @click="backTop"><i class="el-icon-arrow-up"></i></div>
</div>

使用了elementui的InfiniteScroll 无限滚动，但是好像不能同时使用el-scrollbar否则会监听不到下拉触底事件，所以使用原生的滚动条改了下样式


export default {components: {Comment},data() {return {commentList: [],//评论列表queryData: {business: 'video',businessId: 1,pageNum: 1,pageSize: 10,},//查询评论列表传参allPages: 1,//评论总页数};},methods: {/*获取评论列表*/getComment() {getComment(this.queryData).then(res => {this.commentList = this.commentList.concat(res.rows)this.allPages = parseInt(res.total / this.queryData.pageSize)})},/*获取更多评论*/getMore(){console.log(this.queryData.pageNum,this.allPages);this.queryData.pageNum = this.queryData.pageNum + 1;if(this.queryData.pageNum > this.allPages){}else {this.getComment()}},/*回到顶部*/backTop(){this.$refs['backTop'].scrollTop = 0},},created() {this.getComment()}
};

.commentList{overflow-y: scroll;
}
.noMore{line-height: 64px;font-size: 12px;color: #99A2AA;text-align: center;margin: 0 20px 0 66px;border-top: 1px solid #e5e9ef;
}
.back-top{position:absolute;right:50px;bottom:20px;background: #f7f9fa;border: 1px solid #e5e9ef;border-radius: 3px;width: 45px;height: 45px;margin-bottom: 8px;transition: all 0.3s;cursor: pointer;color: #999;text-align: center;font-size: 28px;line-height: 45px;
}
.back-top:hover{background-color: #00a1d6;border-color: #00a1d6;color: #fff;
}


<!--滚动条样式-->
<style lang="scss" rel="stylesheet/scss" scoped>
::-webkit-scrollbar
{width: 5px;
}/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{border-radius: 10px;background-color: rgba(0,0,0,0.1);
}/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: rgba(0,0,0,0.1);
}</style>

2. Comment组件

<!--评论模块-->
<template><div class="container"><div v-for="item in comments" class="comment"><CommentItem :comments="item"></CommentItem></div></div>
</template><script>
import CommentItem from "./CommentItem";export default {props: {comments: {type: Array,required: true}},components: { CommentItem },data() {return {}},methods: {},created() {}
}
</script><style lang="scss" scoped></style>

因为每一条评论都会有单独的分页，暂时想到的方法就是每一条评论单独弄个组件出来。

3. CommentItem组件

<template><div class="comment"><div class="comment_left"><div class="block"><el-avatar :size="48" :src="comments.avatar"></el-avatar></div></div><div class="comment_right"><div class="right_name">{{ comments.nickName }}</div><p class="right_content">{{ comments.content }}</p><div class="right_other"><span class="other_time">{{ comments.createTime }}</span><span class="other_likeNumber"><i class="iconfont icon-31dianzan"></i>{{ comments.likeNumber }}</span><!--<span class="other_revertNumber">回复</span>--></div><div class="replay_box"><div v-for="(item,index) in replayList" v-if="index < showTotle || showMore" class="replay-item"><div class="item-left"><div class="block"><el-avatar :size="24" :src="item.avatar"></el-avatar></div></div><div class="item-right"><div class="right-top"><div class="item-right-name">{{ item.nickName }}</div><span class="text-con"><span v-if="item.parentId !== item.topParentId">回复<el-button class="btn-more" type="text">{{ item.replyNickName }}</el-button></span>{{ item.content }}</span></div><div class="right-bottom"><div class="right_other"><span class="other_time">{{ item.createTime }}</span><span class="other_likeNumber"><i class="iconfont icon-31dianzan"></i>{{ item.likeNumber }}</span><!--<span class="other_revertNumber">回复</span>--></div></div></div></div><div v-if="total > showTotle && !showMore" class="view-more">共<b>{{ total }}</b>条回复,<el-button class="btn-more" size="mini" type="text" @click="viewMore">点击查看</el-button></div></div><div v-if="showMore" class="paging-box"><el-pagination:current-page.sync="queryData.pageNum":small="true":total="total"layout="total, prev, pager, next"next-text="下一页"prev-text="上一页"@current-change="getCommentReply"></el-pagination></div></div></div>
</template><script>
import {getCommentReply} from "@/api/system/comment";export default {name: "CommentItem",props: {comments: {type: Object,required: true}},data() {return {showMore: false,//显示跟多回复showTotle: 3,//默认显示条数replayList: [],queryData: {pageNum: 1,pageSize: 10,},total: null,}},methods: {/*获取跟多评论的回复*/viewMore() {this.showMore = true},getCommentReply() {getCommentReply(this.comments.id, this.queryData).then(res => {this.replayList = res.rowsthis.total = res.total})},},created() {this.getCommentReply()}
}
</script><style lang="scss" rel="stylesheet/scss" scoped>
.comment {display: flex;.comment_left {margin: 24px 0 0 0px;}.comment_right {flex: 1;margin: 0 20px;border-top: 1px solid #e5e9ef;padding: 22px 0 14px 0;.right_name {font-size: 12px;color: #6D757A;font-weight: bold;line-height: 18px;padding-bottom: 4px;display: block;word-wrap: break-word;position: relative;}.right_content {position: relative;line-height: 20px;padding: 2px 0;font-size: 14px;color: #222;text-shadow: none;overflow: hidden;word-wrap: break-word;word-break: break-word;white-space: pre-wrap;margin: 0;}.right_other {color: #99a2aa;line-height: 14px;margin-top: 6px;font-size: 12px;display: flex;font-family: none;.other_time {margin-right: 20px;}.other_likeNumber {cursor: pointer;margin-right: 20px;}.other_likeNumber:hover {i {color: #1dacdb;}}.other_revertNumber {padding: 0 5px;border-radius: 4px;margin-right: 15px;cursor: pointer;display: inline-block;}.other_revertNumber:hover {color: #00a1d6;background: #e5e9ef;}}.replay_box {.view-more {font-size: 12px;color: #6d757a;.btn-more:hover {background: #e5e9ef !important;color: #00a1d6 !important;}}.replay-item {display: flex;padding: 10px 0;.item-left {display: inline-block;position: relative;margin-right: 10px;vertical-align: top;}.item-right {display: flex;flex-direction: column;flex: 1;.right-top {display: flex;font-size: 12px;font-weight: bold;line-height: 18px;padding-bottom: 4px;word-wrap: break-word;position: relative;}.right-bottom {}.item-right-name {color: #6d757a;position: relative;top: 2px;}.text-con {font-weight: normal;font-size: 14px;color: #222;line-height: 20px;white-space: pre-wrap;margin-left: 14px;flex: 1;button {padding: 0;}}}}}}
}
</style>

这里就是些样式啥的，照搬的b站的样式，还有个回复的按钮注释了，要用到再加，额点赞的功能也没有，只是显示了个数量，要功能再加。

效果图

默认显示3条评论的回复

点击查看更多显示一页10条的分页
滑动触底时自动加载下一页评论，当前页数>2时显示回到顶部按钮

仿B站的视频评论列表相关推荐

苹果cmsV10仿B站风格视频影视电影网站源码
简介: 苹果cmsV10仿B站风格视频影视电影网站源码,完整版含苹果CMSV10,下载后安装即可网盘下载地址: http://www.bytepan.com/7ZvgG8Ofnb1
Android 仿B站鬼畜视频实现换脸
最近逛B站总是看到一些鬼畜视频,于是也模仿写了一个,效果如下: 所需的技术介绍: 视频编解码 (用于将视频解码为裸数据,再编码成视频,解码使用MediaCodec,编码同时介绍使用MediaCodec ...
python爬取b站评论_用python 抓取B站视频评论，制作词云
python 作为爬虫利器,与其有很多强大的第三方库是分不开的,今天说的爬取B站的视频评论,其实重点在分析得到的评论化作嵌套的字典,在其中取出想要的内容.层层嵌套,眼花缭乱,分析时应细致!步骤分为以下 ...
简单的爬取B站视频评论
2019年12月20日15:14:09补充: 这篇博客为刚学爬虫的一个简单实践,主要使用到的为selenium模拟点击补充说明的主要原因是有小伙伴问我评论提取的相关问题,这里统一回复一下最简单的办 ...
Android 仿抖音视频播放列表和评论列表
Android 汇集CSDN.GitHub等最实用的良心之作-KING Android最实用的各种技能点的网址链接(每天都会更新,希望大家用的上) Android 仿抖音系列之视频播放列表和评论列表 ...
vue.js实现带表情评论功能前后端实现（仿B站评论）
文章目录学习链接效果图后台建表评论表(重要) 用户表实体类 Comment User CommentDTO(重要) WebConfig配置配置跨域和静态资源文件夹 Mybatisplus ...
插件制作实战（B站视频评论屏蔽）
一天,在B站刷着视频,突然想查看up主在视频下的评论,奈何评论太多,很难找到up主的评论,因此便有了做该插件的想法.话不多说,马上开始动手,首先我们应该先了解一下一个插件的构成. 插件框架在上图中我 ...
精仿B站源码+自动采集360视频
介绍: 精仿B站源码+自动采集360视频精仿哔哩哔哩还原度高达90% 响应式设计无需担心网页卡顿问题整体简洁明了让你的视觉效果达到极致,追寻探索化的中心欢迎您的使用采用了无数据库全本地化设计(无 ...
仿网易/QQ空间视频列表滚动连播炫酷效果
代码地址如下: http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境需要下载七牛的开源播放器SDK 本例子实现了仿网易 ...

仿B站的视频评论列表

1.使用页面部分

2. Comment组件

3. CommentItem组件

效果图

仿B站的视频评论列表相关推荐

最新文章

热门文章