uniapp 上拉加载

在uniapp中实现上拉加载更多功能的方法如下：

1. 首先，在项目的根目录中的pages.json配置文件中，找到需要添加上拉加载更多功能的页面（比如goods_list页面），在其对应的配置中设置onReachBottomDistance属性为一个数值，表示当距离页面底部多少距离时触发上拉加载更多的事件。例如：

{
  "path": "goods_list/goods_list",
  "style": {
    "onReachBottomDistance": 150
  }
}

2. 在goods_list页面中，声明一个onReachBottom事件处理函数，用来监听页面的上拉触底行为。例如：

methods: {
  onReachBottom() {
    // 在这里编写触底时的逻辑处理代码
    // 可以在这里进行页码的自增等操作，然后重新获取列表数据
    this.queryObj.pagenum += 1;
    this.getGoodsList();
  },
  
  // 其他方法和代码...
}

3. 在methods中的getGoodsList函数中，根据页码的变化，发起请求获取相应页码的列表数据，并对新旧数据进行拼接处理。例如：

methods: {
  async getGoodsList() {
    // 发起请求获取商品列表数据
    const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj);
    if (res.meta.status !== 200) {
      return uni.$showMsg();
    }
    
    // 将新获取的商品数据与已有的商品数据进行拼接
    this.goodsList = [...this.goodsList, ...res.message.goods];
    this.total = res.message.total;
  },
  
  // 其他方法和代码...
}

通过以上方法，在uniapp中就可以实现上拉加载更多的功能了。当用户滑动到页面底部时，会触发onReachBottom事件，然后根据需要进行相应的处理，例如页码的自增、重新请求数据等，最后将新数据与已有数据进行拼接。这样就可以实现上拉加载更多的效果了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uniapp新闻列表-上拉刷新-下拉加载更多.zip](https://download.csdn.net/download/wy313622821/13569533)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [uni-app 数据上拉加载更多功能](https://blog.csdn.net/SmartJunTao/article/details/123684356)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]