vuetifyjs 中的无限滚动刷新

Question

在onload中使用“done('empty')”方法后，滚动不再起作用。例如 - 我向下滚动，项目结束，我滚动到顶部。这次在项目中推送新行，我想显示它们，但在向下滚动方法 onload 后不触摸。

启动滚动

<v-infinite-scroll ref="v_infinite_scroll" :items="items" :onLoad="loadItems">

加载方法

async loadItems ({ done }) {
            
    let data = await api.loadItems;
            
    if (data == null) {
         try {
             done('empty')
             return;
         } catch (error) {
             console.error(error)
         }
             return;
         }

         try {
            done('ok')
            return;
         } catch (error) {
            console.error(error)
         } 
},

我尝试使用 this.$forceUpdate() 重新渲染父组件，并使用 this.$refs.v_infinite_scroll.$forceUpdate() 重新渲染滚动组件，但什么也没有。

Answer 1

当

done

函数处于“空”状态时，滚动被认为已完全完成，并且没有办法让它再次滚动。解决方法是在函数处于“空”状态之前保存函数的副本，然后您可以使用该副本来重置原始函数。

let doneCopy = null

async loadItems ({ done }) {
  let data = await api.loadItems;
  if (data == null) {
    doneCopy = done // save copy
    done('empty')
    return;
  }
  else if (data !== null && doneCopy) {
    doneCopy('ok') // reset original "done" function
    doneCopy = null
  }
  ...
}