列表分页会出现的问题

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
      }
  }
}
上一篇 下一篇

猜你喜欢

热点阅读