微信小程序下拉刷新列表onPullDownRefresh；微信小程序上划加载列表onReachBottom；uni-app微信小程序下拉加载数据；uni-app微信小程序上划页面加载数据

需求：微信小程序列表加载有两种方式，分别是按住页面下拉加载数据数据（触发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>