uniapps上拉加载

### 如何在 UniApps 中实现上拉加载更多功能

#### 实现概述
为了实现在 UniApp 应用程序中上拉加载更多数据的功能，通常会采用分页技术。这涉及到前端页面设计以及与服务器端的数据交互逻辑。具体来说，在滚动到底部时触发事件请求新一批次的数据并将其追加到现有列表中。

#### 页面布局设置
首先定义好页面的基础结构，包括用于展示内容的 `scroll-view` 或者其他容器组件，并为其绑定触底事件处理函数：

<template>
  <view class="container">
    <!-- 数据项 -->
    <block v-for="(item, index) in dataList" :key="index">
      <view>{{ item }}</view>
    </block>

    <!-- 加载提示符 -->
    <text v-if="loadingMore">正在加载...</text>
    <text v-else-if="noMoreData">没有更多数据</text>
    
    <!-- scroll-view 组件用于检测是否到达底部 -->
    <scroll-view @scrolltolower="loadMoreHandler"></scroll-view>
  </view>
</template>

#### Vue.js 方法编写
接着是在脚本部分声明变量保存当前状态（比如是否有更多可加载的内容），同时创建异步获取远程资源的方法；当用户操作接近屏幕末端时调用此方法以增加偏移量从而获得新的记录集[^1]。

<script>
export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      loadingMore: false,
      noMoreData: false,
      dataList: []
    };
  },
  
  onLoad(options){
     this.loadData();
  },

  methods: {
    async loadData(){
        try{
            const res = await uni.request({
                url:'https://example.com/api/getList',
                method:"GET",
                data:{
                    pageNumber:this.page,
                    pageSize:this.pageSize
                }
            });
            
            if(res.data.length === 0 || res.data.length<this.pageSize){
               this.noMoreData=true;
            } else {
              this.dataList.push(...res.data);
              this.loadingMore=false;   
            }

        }catch(error){
           console.error('Failed to fetch data:', error.message);
        }
        
    },


    loadMoreHandler () {
       if(this.noMoreData||this.loadingMore){return;}
       
       this.loadingMore=true;
       ++this.page;

       setTimeout(() => { //模拟网络延迟
          this.loadData(); 
       }, 500); 

    }
  }
}
</script>

通过上述方式可以在 UniApps 平台上构建具备良好用户体验的商品浏览界面或其他类型的动态信息流应用[^2]。