uniapp向上拉加载，下拉刷新_uniapp局部下拉刷新上拉加载数据

一、上拉加载（页面 | uni-app官网）

onReachBottom

可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，

比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档。

使用实例：

export default {
  data() {
    return {
      list: [],//数据列表
      params: {// 请求参数
        pageNum: 1,//页码
        pageSize: 10,//每页显示
        total: 0,//总条数
      },
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    getList() {// 获取列表
    //调用接口
      listTrends(this.params).then((result) => {
        this.params.total = result.total;
        this.list = [...this.list, ...result.rows];//现有数据=旧数据+请求的新数据
          uni.stopPullDownRefresh()// 请求成功关闭下拉加载
});
    },
    onReachBottom() {// 上拉加载
      // 当列表数量不大于或等于总数量，则再次调用接口请求数据
      if (this.list.length >= this.params.total) return;
      this.params.pageNum++;
      this.getList();
    },
  },
};

二、下拉刷新

onPullDownRefresh（pages.json 页面路由 | uni-app官网）

首先需要在pages.json中找到需要下拉刷新的页面，配置enablePullDownRefresh为true

示例

{
      "path": "pages/mine/index",
      "style": {
        "navigationBarTitleText": "我的",
        "enablePullDownRefresh": true
      }
    }

页面示例

export default {
  data() {
    return {
      list: [],//数据列表
      params: {// 请求参数
        pageNum: 1,//页码
        pageSize: 10,//每页显示
        total: 0,//总条数
      },
    };
  },
  onLoad() {
    this.getList();
  },
  //下拉刷新方法
onPullDownRefresh () {
	this.params.pageNum = 1
    this.list = []
    this.getList()  //获取数据
},
  methods: {
    getList() {// 获取列表
      listTrends(this.params).then((result) => {
        this.params.total = result.total;
        this.list = [...this.list, ...result.rows];//现有数据=旧数据+请求的新数据
      });
    },
    onReachBottom() {// 上拉加载
      // 当列表数量不大于或等于总数量，则再次调用接口请求数据
      if (this.list.length >= this.params.total) return;
      this.params.pageNum++;
      this.getList();
    },
  },
};