uniapp实现上拉加载、下拉刷新

一、上拉加载：

1、普通页面：

<script>
export default {
  data(){
    // 分页参数
    queryParams: {
      pageNum: 1,
      pageSize: 10
    },
    // 总数
    total: 0,
    // 加载状态
    statusMore: 'more',
  },
  // 页面触底触发
  onReachBottom() {
    if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) return;
    this.statusMore = 'loading';
    setTimeout(() => {
      this.queryParams.pageNum++;
      // 获取数据
      this.getData();
    }, 300);
  }
};
</script>

2、在scroll-view中：

<template>
  <scroll-view
  scroll-y
  style="height: 100vh"
  @scrolltolower="loadData"
  >
  <!-- 页面内容 -->
  </scroll-view>
</template>
<script>
export default {
  methods: {
    // 页面触底触发
    loadData() {
      if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) return;
      this.statusMore = 'loading';
      setTimeout(() => {
        this.queryParams.pageNum++;
        // 获取数据
        this.getData();
      }, 300);
    }
  }
}
</script>

二、下拉刷新：

1、普通页面：

1. 需要在pages.json设置：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true // 是否支持下拉刷新
      }
    }
  ]
}

2. 页面中：

<script>
export default {
  data(){
    // 分页参数
    queryParams: {
      pageNum: 1,
      pageSize: 10
    },
    // 总数
    total: 0,
    // 数据
    list:[],
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.queryParams.pageNum = 1;
    this.list = [];
    // 获取数据
    this.getData();
  }
};
</script>

2、在scroll-view中：

<template>
  <scroll-view
  scroll-y
  style="height: 100vh"
  refresher-enabled
  :refresher-triggered="triggered"
  @refresherrefresh="refreshData"
  >
  <!-- 页面内容 -->
  </scroll-view>
</template>
<script>
export default {
  data(){
    // 是否开启下拉刷新
    triggered: false,
    // 数据
    list:[],
  },
  onLoad() {
    // 下拉刷新
    this.refreshData();
  },
  methods: {
    // 下拉刷新
    refreshData() {
      this.triggered = true;
      this.queryParams.pageNum = 1;
      this.list = [];
      // 获取数据
      this.getData();
    },
  }
}
</script>