封装请求接口 ：
get 提交的query数据放在params里面（或者放在url?后面）
/**
* 文章评论
* 功能1： 获取文章的评论
* ======》 type a 评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
* ======> source 文章 id 源id，文章id或评论id
* ======》 offset 第一页不传，获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
* limit 每页的条数 获取的评论数据个数，不传表示采用后端服务设定的默认每页数据量
* 功能2： 评论的恢复
* ======》 type c
* ======> source 文章 id
* ======》 offset 第一页不传，
* limit 每页的条数 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
*/
export const getArticleCommentApi = (data) =>
request({
url: "/v1_0/comments/",
params: data, // get 提交的query数据放在params里面（或者放在url?后面）
data,
});
封装评论组件 commentList
带vant 的List 组件 上拉加载数据 ；
评论在开始不会请求数据，因为 List 组件 不在可视范围内，不会触发 onl oad 函数
父组件传值 props 的值 ：2 个 ，type（获取的是评论(a)还是评论的恢复（c）） ;
上拉到评论的位置，才会发起请求获取评论数据，
评论总数 ：
data() {
return {
totalCommentCount: "", // 评论总数
};
},
template 内容 ： 开始 0
<van-icon name="comment-o" :badge="totalCommentCount" color="#777" />
刚进页码的时候不会显示评论的总数 ：
因为 onl oad 函数没有触发，那我的总评论数也没有刷新值 ：
// 通知外面设置评论的总数量 this.$emit("sendTotal", data.data.total_count); 可以在 created 里面自己调用 onl oad 函数 ，但是上拉到评论内容的时候会再一次执行onLoad 函数，设置属性 immediate-check 就不会自动执行onLoad了 ；
<template>
<!-- :immediate-check="false" -->
<van-list
v-model="loading"
:immediate-check="false"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell
v-for="(item, index) in list"
:key="index"
:title="item.content"
></van-cell>
</van-list>
</template>
<script>
import { getArticleCommentApi } from "@/api/Article";
export default {
name: "CommentList",
components: {},
props: {
// 评论type=a 评论的恢复 type=c
type: {
type: String,
required: true,
},
// 源id 文章 id 评论 id
source: {
type: [String, Number],
required: true,
},
},
data() {
return {
list: [], // 评论列表
loading: false, // 上拉加载更多的 loading
finished: false, // 是否加载结束
limit: 10, // 每页数量
offset: null, // 偏移的评论id位置
};
},
created() {
// 为了得到评论总数，自己直接执行onLoad函数，不需要等到上拉到评论区域才会触发执行函数 onl oad
// this.loading = true;
this.onLoad();
},
methods: {
async onl oad() {
// console.log("trigger onl oad");
try {
// 异步更新数据
// 1. 发生请求获取数据
const { data } = await getArticleCommentApi({
type: this.type,
source: this.source,
offset: this.offset,
limit: this.limit,
});
// console.log(res);
// 2. 将数据追加到列表
this.list.push(...data.data.results);
// 4. 判断是否结束
if (this.list.length === data.data.total_count) {
console.log(this.list.length === data.data.total_count);
// 4.1 结束 finished 设置 true
this.finished = true;
} else {
// 4.2 未结束 处理页码，累加数据
this.offset = data.data.last_id;
}
// 通知外面设置评论的总数量
this.$emit("sendTotal", data.data.total_count);
} catch (error) {
console.log({ error });
this.$toast.fail("加载评论失败");
}
// 3. 关闭loading（无论成功还是失败）只要执行了onLoad函数
this.loading = false;
},
},
};
</script>
View Code
父组件传值 ：
<!-- 文章品论组件开始 -->
<commentList
type="a"
:source="articleInfo.art_id"
@sendTotal="totalCommentCount = $event"
/>
<!-- 文章品论组件结束 -->
标签：onLoad,type,offset,评论,文章,组件,data,id From： https://www.cnblogs.com/zhulongxu/p/16796448.html