在本章节，我们重点学习如何做上拉加载更多。
接口地址：https://www.yuque.com/xiumubai/fe/yf8tf3#oV4jG

定义接口

  2. import Service from '@/utils/http';
  4. class Course extends Service {
  5.   /**
  6.    * @description: 获取课程列表
  7.    * @param {*} options
  8.    * @return {*}
  9.    */
  10.   courseList(options = {}) {
  11.     options.url = `/api/edu/course/${options.page}/${options.limit}`;
  12.     return this.get(options);
  13.   }
  14. }
  16. const courseService = new Course();
  17. export default courseService;

请求接口

  1. <script>
  2. import courseService from "@/services/course";
  4. export default {
  5.   data() {
  6.     return {
  7.       list: [],
  8.       params: {
  9.         page: 1,
  10.         limit: 10,
  11.       },
  12.       status: "more",
  13.     };
  14.   },
  15.   onLoad() {
  16.     this.getCourseList();
  17.   },
  18.   /**
  19.    * @description: 监听触底事件，最外层view不能添加css样式overflow：scroll 
  20.    * @returns {*}
  21.    */  
  22.   onReachBottom() {
  23.     if (this.status !== "noMore") {
  24.       this.status = "loading";
  25.       this.params.page++;
  26.       this.getCourseList();
  27.     }
  28.   },
  29.   methods: {
  30.     async getCourseList() {
  31.       try {
  32.         const res = await courseService.courseList({
  33.           ...this.params,
  34.         });
  35.         const items = res.data.items;
  36.         // 数组解构拼接
  37.         this.list = [...this.list, ...items];
  38.         if (items.length < 10) return (this.status = "noMore");
  39.         if (items.length >= 10) this.status = "more";
  40.       } catch (e) {
  41.         console.log("e", e);
  42.       }
  43.     },
  44.   },
  45. };
  46. </script>
  • 默认onLoad的时候请求一次数据
  • 监听onReachBottom事件，当触底的时候再次请求数据，这时候page+1，status显示状态为loading
  • 请求到的数据利用数组接口的方式进行拼接
  • 当本次请求数据<每页条数（默认10条），说明服务端数据加载完了，status显示状态为noMore
  • 当本次请求数据>=每页条数（默认10条），说明服务端数据未完，上拉可以继续加载更多数据，status显示状态为more

    页面渲染

    1. <template>
    2. <view class="course_list">
    3.   <view class="course_list_item" v-for="item in list" :key="item.id">
    4.     <navigator
    5.       class="course_list_item_a"
    6.       :url="'/pages/course/detail?id=' + item.id"
    7.       >
    8.       <view class="item_cover">
    9.         <image :src="item.cover" />
    10.       </view>
    11.       <view class="item_content">
    12.         <h3 class="content_title">{{ item.title }}</h3>
    13.         <view class="content_price">
    14.           <view class="price">¥{{ item.price }}</view>
    15.           <view class="buy_num">{{ item.buyCount }}人已购买</view>
    16.         </view>
    17.       </view>
    18.     </navigator>
    19.   </view>
    20.   <!-- 加载更多 -->
    21.   <view class="load_more">
    22.     <uni-load-more :status="status" />
    23.   </view>
    24. </view>
    25. </template>
    对于我的订单和我的收藏页面，除了接口url和样式不一致以外，其他的完全一个套路，
    具体可以参考代码：
    我的订单src/pages/order/list.vue
    我的收藏src/pages/course/collect.vue