首先 配置 pages.json
{
"path": "需要上拉触底的页面",
"style": {
"onReachBottomDistance": 50 // 上拉触底50距离触发
}
}
<script>
export default {
data() {
return {
page: 1, // 请求页码数
flag: false, // 防抖 防止一下请求多次
list: [] // 后端返回的数据列表
}
},
// 上拉触底方法
onReachBottom() {
if (this.flag) {
this.page++
this.flag = false
this.getOrder(); // 疯狂的请求的方法
}
},
methods: {
async getOrder() {
const { data } = await 请求接口
// 将之前的数据和新请求的数据拼接
this.list = [...this.list, ...data.data]
// 判断如果请求数据小于10了将不再发起请求
if (data.data.length < 10) {
this.flag = false
} else {
this.flag = true
}
console.log(this.list);
}
}
}
</script>