06 uni-app 的下拉刷新 和 触底加载

【下拉刷新 + 触底加载 】使用的是uni-app自带的 scroll-view 组件
文档地址 ： https://uniapp.dcloud.io/component/scroll-view?id=scroll-view

scroll-view 需要使用到的几个api ：

注意事项：

使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height。

【触底加载】 这里需要配合使用 uView 的 loadMore 组件
文档地址 ： https://www.uviewui.com/components/loadMore.html

loadMore 需要使用到的api ：

页面交互判断逻辑：

1. 下拉刷新

触发拉下刷新的回调函数 @refresherrefresh 在这个函数中，要做的几个动作 ：
配置刷新状态 refresher-triggered = true -> await 重新加载数据 -> refresher-triggered = false

1. 触底加载的动作：
   通过数据总条数 和 当前数据条数，配置 u-loadmore 的 status 控制底部显示文字

@scrolltolower 回调 触发 加载更多数据

code 如下

<template>
      <view class="meetingContent">
        <scroll-view scroll-y="true" refresher-enabled @refresherrefresh="onRefresh"
          refresher-background="rgba(244, 246, 248, 1)" :refresher-triggered="triggered" @scrolltolower="scrolltolower">
          <u-empty v-if="!loading && total === 0" />
          <template v-else>
            <view v-for="item in meetingList" :key="item.id">
              <u-gap height="20" bg-color="rgba(244, 246, 248, 1)" />
              <meeting-card :info="item"></meeting-card>
            </view>
            <u-loadmore :status="loadMoreStatus" />
          </template>
        </scroll-view>
      </view>
</template>
<script>
  // MeetingCard 是UI组件，这里可以随便替换成自己的demo结构
  import MeetingCard from '../components/meetingCard.vue';
  export default {
     data: () => ({
        loading: true, // 暂无数据 flag
        total: 0,
        loadMoreStatus: "loadmore",
        reloadStatus: false, // 数据重新加载 flag
        triggered: false, // 下拉状态
        current: 1,
        meetingList: [],
      }),
      methods: {
          fetchCardListData() { // 获取界面数据
          console.log('this.fetchCardListData -- params',this.searchParams)
          console.log('获取页面数据呢')
          this.loading = true;
          const resData = [{
            id: '1zxd',
            status: 1,
            checkTime: 1624772266174,
            createName: '王伟',
            meetingName: '【监理例会】会议纪要20210509',
            meetingOrg: '重庆十八梯项目',
            riskKey: '劳动力不足，机械不足，材料不足',
            riskType: '质量、安全、人员履职、环境'
          }, {
            id: 'sdfsafd',
            status: 2,
            checkTime: 1624772266174,
            createName: '王伟',
            meetingName: '【监理例会】会议纪要20210509',
            meetingOrg: '重庆十八梯项目',
            riskKey: '劳动力不足，机械不足，材料不足',
            riskType: '质量、安全、人员履职、环境'
          }]
          // 判断是下拉刷新 还是 触底更多
          if(this.reloadStatus){
            this.meetingList = resData
          }else{
            this.meetingList = this.meetingList.concat(resData);
          }
          this.loading = false;
          this.total = 3;
          // 判断是否可以触底加载
          this.meetingList.length < this.total ? this.loadMoreStatus = 'loadmore' : this.loadMoreStatus = "nomore";
          this.reloadStatus = false;
          this.loading = false;
        },
        reloadData() { // 重新加载数据 fn
          this.current = 1;
          this.reloadStatus = true;
          this.meetingList = [];
          return this.fetchCardListData();
        },  
        async onRefresh() { // 下拉刷新被触发
          console.log('下拉触发')
          this.triggered = true;
          await this.reloadData();
          this.triggered = false;
        },
        scrolltolower() { // 滚动到最底部 触底加载
          console.log('触底加载')
          if (this.meetingList.length < this.total) {
            this.loadMoreStatus = "loading";
            this.current++;
            this.fetchCardListData();
          } else {
            this.loadMoreStatus = "nomore";
          }
          }
      }  
  }
</script>
<style lang="scss" scoped>
  .meeting_wrap{
    height: 100%;
  }
  .meetingContent {
    flex: auto;
    overflow: hidden;
    height:900rpx;
  }
  scroll-view {
    height: 100%;
  }
</style>

运行效果：
初始化 ->

下拉 ：

触底：