： 搜索功能实现 – 搜索结果组件的封装 – 上拉加载

<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="(item, index) in list" :key="index" :title="item.title" />
  </van-list>
</template>

<script>
import { getSuggestApi } from "@/api/Search";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
      per_page: 10,
    };
  },
  created() {
    console.log(this.keywords);
  },
  props: {
    keywords: {
      type: String,
      required: true,
    },
  },
  methods: {
    async onLoad() {
      // 1.发送请求数据
      const { data } = await getSuggestApi({
        page: this.page,
        per_page: this.per_page,
        q: this.keywords,
      });
      //   console.log(data);
      // 2. 将数据追加到列表中
      this.list.push(...data.data.results);
      console.log(this.list);
      //   3. 关闭loading
      this.loading = false;
      // 4. 判断是否结束
      if (this.list.length < data.data.total_count) {
        // 还有数据没有加载完，继续请求数据
        this.page++;
      } else {
        // 没有数据了，结束onLoad函数
        this.finished = true;
      }
    },
  },
};
</script>

<style>
</style>