uniapp开发微信小程序触底加载更多

### 如何在 UniApp 中实现微信小程序触底加载更多功能 要在 UniApp 中实现微信小程序的触底加载更多功能，可以按照以下方式设计逻辑结构并编写代码： #### 1. 数据初始化与页面配置 首先，在 `data` 函数中定义必要的变量来存储当前页码、每页数据量以及总数据状态。 ```javascript export default { data() { return { page: 1, // 当前页码 pageSize: 15, // 每页数据条数 listData: [], // 存储获取到的数据 hasMore: true, // 是否还有更多数据 loadingText: '上拉加载', // 默认提示文字 }; }, }; ``` #### 2. 页面滚动监听事件 通过绑定 `onReachBottom` 方法监听页面触底事件。每次触发该方法时，调用接口加载下一页数据，并更新 UI 和状态。 ```javascript methods: { async loadMoreData() { if (!this.hasMore) return; this.loadingText = '正在加载...'; // 修改提示语 try { const res = await this.fetchData(this.page + 1); // 调用接口获取新数据 if (res.length === 0 || res.length < this.pageSize) { this.hasMore = false; // 如果返回数据不足或为空，则无更多数据 this.loadingText = '没有更多'; } else { this.listData.push(...res); // 将新数据追加至已有数据数组 this.page += 1; // 更新页码 this.loadingText = '上拉加载'; // 还原默认提示语 } } catch (error) { console.error('加载失败:', error); this.loadingText = '加载失败，请重试'; } }, fetchData(page) { // 模拟异步请求接口 return new Promise((resolve) => { setTimeout(() => { resolve(Array.from({ length: Math.random() * 10 }, (_, i) => ({ id: `${page}-${i}`, name: `商品 ${page}-${i}` }))); }, 1000); }); } }, // 监听页面触底事件 onReachBottom() { this.loadMoreData(); // 触发加载更多逻辑 } ``` 上述代码实现了分页加载的核心逻辑[^3]。每当用户滚动到底部时，会自动尝试加载下一页的内容。如果服务器返回的数据不足以填满整个页面大小或者没有任何数据返回，则停止继续加载。 #### 3. 渲染视图层 最后，在模板文件中展示已有的数据列表，并动态调整底部提示信息的状态。 ```html <template> <view class="container"> <!-- 商品列表 --> <block v-for="(item, index) in listData" :key="index"> <text>{{ item.name }}</text> </block> <!-- 底部加载提示 --> <view class="loading-tip">{{ loadingText }}</view> </view> </template> <style scoped> .container { padding: 20px; } .loading-tip { text-align: center; margin-top: 20px; color: gray; } </style> ``` 以上即为完整的 UniApp 微信小程序触底加载更多功能的实现方案。 ---