无限滚动

如果您想在用户向下滚动页面时逐步加载新的内容，请使用QInfiniteScroll组件。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QInfiniteScroll']
}

基本用法

<q-infinite-scroll :handler="loadMore">
  <!-- 内容, 在本例中是一些<p>标签 -->
  <p v-for="item in items" class="caption">
    Lorem ipsum dolor sit amet...
  </p>

  <!--
    当加载额外的内容时，DOM元素使用slot="message"来显示（在本例中
    是一个点旋转器）
  -->
  <q-spinner-dots slot="message" :size="40"></q-spinner-dots>
</q-infinite-scroll>

重要
当少于一个屏幕高度的内容用来显示时无限滚动提前加载项目。如果您获取的内容高度低于屏幕上的容器高度，则无限滚动将继续加载更多内容。所以请确保你加载了足够的内容。

重要
当放置为Vue组件的直接子元素来渲染页面时，它的效果最好。如果将它放在溢出的(overflowed)DOM元素或组件之下，不要忘记设置inline属性。

Vue属性

Vue属性 必需 类型 说明
handler 是 函数 来自VM的方法, 被调用以加载更多内容
inline 空 将无限滚动放入溢出的DOM元素中时使用它
offset 数字 相对于无限滚动容器底部的偏移量（像素），组件应从该容器中提前开始加载更多内容。默认它是一个容器高度。

Vue方法

Vue方法 说明
loadMore() 无论滚动位置在哪，都加载更多内容。
reset() 将索引重置为0.
stop() 无论滚动位置在哪，停止工作。
resume() 开始工作。调用时检查滚动位置，如果触发了，则会加载更多内容。
poll() 检查滚动位置并根据需要加载更多内容。

处理程序

处理函数有两个参数：

loadMore: function(index, done) {
   //index - 第n次调用
   //done - 当您进行所有必要更新时调用的函数。
   //不要忘记调用它，否则你的加载消息
   //将继续显示。
   //具有可选的布尔参数，在true时调用stop（）

   //创建一些Ajax调用，然后调用done()
}

index参数可用于对您加载的内容进行某种分页。 它采用从1开始的数字值，并随每次调用递增。

内联使用

当您将无限滚动放入溢出的DOM元素中时使用它。

<q-infinite-scroll
  :handler="loadMore"
  inline
  style="height: 400px; overflow: auto;"
>
  ...
</q-infinite-scroll>

控制无限滚动

如果由于某种原因需要控制无限滚动组件的工作状态，请使用Vue引用并调用上面的方法。

<q-infinite-scroll
  :handler="loadMore"
  ref="infiniteScroll"
>
  ...
  <button @click="$refs.infiniteScroll.stop()">
    Stop Loading More
  </button>
  ...
</q-infinite-scroll>
滚动指令 滚动区域