library-wechat/subpkg/pages/book-list/book-list.vue

<template>
  <view class="container">
    <!-- 图书列表 -->
    <view class="list-box">
      <book-list-item
        v-for="(item, index) in bookList"
        :key="index"
        :data="item"
        :ranking="index + 1"
        @click="goToDetail(item)"
      />
    </view>

    <!-- 加载提示 -->
    <view class="load-tip" v-if="loading">加载中...</view>
    <view class="load-tip" v-if="noMore">没有更多了</view>
  </view>
</template>

<script>
import bookListItem from "@/components/book-list-item/book-list-item.vue";

export default {
  components: {
    bookListItem
  },
  data() {
    return {
      bookList: [],       // 图书列表
      pageNum: 1,         // 当前页码
      pageSize: 10,       // 每页数量
      loading: false,     // 加载状态
      noMore: false       // 是否到底
    };
  },
  onLoad() {
    this.getList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.refresh();
  },
  // 上拉加载
  onReachBottom() {
    if (!this.loading && !this.noMore) {
      this.pageNum++;
      this.getList();
    }
  },
  methods: {
    // 刷新
    refresh() {
      this.pageNum = 1;
      this.bookList = [];
      this.noMore = false;
      this.getList();
    },

    // 获取列表
    getList() {
      this.loading = true;

      // 模拟请求后端接口
      setTimeout(() => {
        // 模拟数据
        const mockData = [
          {
            imgCover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "名侦探柯南",
            nickname: "青山刚昌",
            publish: "长春出版社"
          },
          {
            imgCover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "三体",
            nickname: "刘慈欣",
            publish: "重庆出版社"
          },
          {
            imgCover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "盗墓笔记",
            nickname: "南派三叔",
            publish: "中国友谊出版公司"
          },
          {
            imgCover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "斗罗大陆",
            nickname: "唐家三少",
            publish: "太白文艺出版社"
          },
          {
            imgCover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "斗破苍穹",
            nickname: "天蚕土豆",
            publish: "湖北少年儿童出版社"
          }
        ];

        let newList = [];
        if (this.pageNum === 1) {
          newList = mockData;
        } else {
          // 第2页模拟无数据
          this.noMore = true;
        }

        this.bookList = [...this.bookList, ...newList];
        this.loading = false;
        uni.stopPullDownRefresh();
      }, 800);
    },

    // 跳详情
    goToDetail(item) {
      uni.navigateTo({
        url: "/subpkg/pages/book-detail/book-detail?isbn=" + item.isbn
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.list-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.load-tip {
  text-align: center;
  padding: 15px;
  font-size: 14px;
  color: #999;
}
</style>