列表分页会出现的问题
2020-12-07 本文已影响0人
盖子pp
列表分页,有时候滑太快,会出问题,避免这个问题
首先:page++ 在触发请求外面写,不是在收到请求里面写
为了避免过快请求,有时候接口返回很快,也会在1s捏请求多次,避免1s内多次触发请求,可以在收到请求里面去设置定时器
滚动分页,一般在收到请求,并且判断数据还没有全部加在完,滚动到页面底部时会触发后面的请求,这个时候在触发后面请求加个定时器,让后面的请求在1s内执行
data: {
timer: null,
list: [],
isReactBtm: false,
isWaiting: false,
page: 1,
size: 10,
loading: false
}
created() {
this.getData()
},
methods: {
getData() {
this.isWating = true
List({
page: this.page++,
size: this.size
}).then(res => {
let data = res.data || []
if (data.length) {
this.list = this.list.concat(data)
this.isReactBtm = this.list.length == res.total
clearTimeout(timer)
setTimeout(()=>{
this.isWating = false
}, 1000)
} else {
this.loading = false
}
}
}