需求：微信小程序列表加載有兩種方式，分別是按住頁面下拉加載數據數據（觸發onPullDownRefresh）和直接上劃滾動頁面到底部加載數據（觸發onReachBottom函數）。

本文主要是使用上劃滾動頁面觸底加載數據（如果做頁面下拉加載數據 只需要復制相同邏輯即可）

以下代碼可直接復制使用：

<template><view><view class="list" v-for="item in dataLit" :key="item.id">姓名:{{item.name}}, 年齡:{{item.age}}</view><view class="text">{{loadMoreText}}</view></view> </template><script> export default {data () {return {loadMoreText: '',dataLit: [// { id: 1, name: '張三1', age: 1 },],max: 10,allTotal: 62,//假設數據總量是62條--每次請求后端page為1，2，3... size為10 每次返回10條}},onReachBottom () {console.log("監聽頁面滾動到底部，一般用于上劃觸底刷新 onReachBottom ")if (this.max > this.allTotal) {return} else {uni.showLoading({title: '加載中...',mask: true,})this.max = this.max + 10// 模擬數據加載setTimeout(() => {this.getMoreList()}, 300)}},onPullDownRefresh () {console.log("監聽用戶下拉動作，一般用于下拉刷新 onPullDownRefresh 需要 enablePullDownRefresh 開啟下拉刷新 在數據加載后使用 stopPullDownRefresh 恢復下拉狀態")// 如果是做下拉刷新 只需要將上劃的邏輯復制進來即可},onShow () {this.getMoreList()},methods: {getMoreList () {let page = Math.ceil(this.max / 10)console.log('max', this.max)console.log('調用后端接口傳遞的page計算', page)// 情景1：請求后端每次返回10條數據 以下遍歷是為了模擬后端返回10條數據--正常是傳遞page和size掉接口獲取10條數據let arr = []for (let index = 0; index < 10; index++) {if (this.dataLit.length + index + 1 <= 62) {arr.push({ id: this.dataLit.length + index + 1, name: '張三' + (this.dataLit.length + index + 1), age: this.dataLit.length + index + 1 })}}this.dataLit = [...this.dataLit, ...arr]// 情景2：后端一次性返回所有數據，前端做數據截取即可--每次上劃截取10條插入// let allList = []//假設這個是后端一次性返回的所有數據列表// this.dataLit = allList.slice(0, this.max)uni.hideLoading()if (this.max > this.allTotal) {this.loadMoreText = "沒有更多了"return} else {this.loadMoreText = "下劃加載更多數據..."}}}, } </script><style lang="less" scope> .list {height: 160rpx;line-height: 160rpx;border-bottom: 1px solid #ccc; } .text {text-align: center;color: #ccc; } </style>

總結

以上是生活随笔為你收集整理的微信小程序下拉刷新列表onPullDownRefresh；微信小程序上划加载列表onReachBottom；uni-app微信小程序下拉加载数据；uni-app微信小程序上划页面加载数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。