QPullToRefresh 组件允许用户下拉刷新页面内容(或检索最新内容)。
¥The QPullToRefresh is a component that allows the user to pull down in order to refresh page content (or retrieve the newest content).
用法(Usage)
¥Usage
基本(Basic)
¥Basic
警告
在你的 @refresh
函数中,完成更多数据加载后,请不要忘记调用传入的 done()
函数。
¥In your @refresh
function, don’t forget to call the passed in done()
function when you have finished loading more data.
要刷新,请在内部滚动位置位于顶部时,下拉(使用鼠标或手指触摸)下方内容。
¥To refresh, pull down (with mouse or through finger touch) on the content below when the inner scroll position is the top.
自定义图标(Custom icon)
¥Custom icon
自定义颜色(Custom coloring)
¥Custom coloring
提示(Tips)
¥Tips
滚动容器
请阅读 此处,了解 Quasar 如何确定要附加滚动事件的容器。
¥Please read here about how Quasar determines the container to attach scrolling events to.
如果使用 QLayout,建议将 QPullToRefresh 设置为 QPage 的直接子元素,并用其包裹页面内容。
¥If using a QLayout, then it’s recommended that you put QPullToRefresh as direct child of QPage and wrap your page content with it.
如果你更改此组件的父级,请不要忘记在 QPullToRefresh Vue 引用上调用
updateScrollTarget()
。¥If you change the parent of this component, don’t forget to call
updateScrollTarget()
on the QPullToRefresh Vue reference.QPullToRefresh 也允许文本选择,因此如果你的内容还包含图片,你可能需要为其添加
draggable="false"
,否则原生浏览器行为可能会产生负面影响。¥QPullToRefresh also allows text selection, so if your content also has images, you might want to add
draggable="false"
to them, otherwise the native browser behavior might interfere in a negative way.