下拉刷新

当你想让用户刷新内容或添加最新内容时。

安装

编辑 /quasar.conf.js:

framework: {
components: ['QPullToRefresh']
}

基本用法

使用QPullToRefresh组件作为页面组件的直接子组件,以封装其所有内容。 有关更详细的示例,请参阅演示中的源代码。

<q-pull-to-refresh :handler="refresher">
<!-- 内容,无论你喜欢什么-->
<p v-for="item in items">
Lorem ipsum dolor sit amet...
</p>
</q-pull-to-refresh>

重要
不要用<div class="layout-padding">封装<q-pull-to-refresh>。 如果你必须,把<div>作为<q-pull-to-refresh>的直接子元素。

Vue属性

Vue属性 类型 默认值 说明
handler 函数 来自VM的必需的方法,将被调用以加载更多内容
distance Number 35 以像素为单位的最小阈值距离, 用于确定释放是否进行刷新
pull-message 字符串 ‘Pull down to refresh’ 在达到上面的阈值之前显示的消息
release-message 字符串 ‘Release to refresh’ 在达到阈值之后释放之前显示的消息
refresh-message 字符串 ‘Refreshing…’ 刷新内容时显示的消息
refresh-icon 字符串 ‘refresh’ 刷新内容时显示的图标,除了上面的文字
inline 布尔 false 如果组件不是QPage的直接子组件,设置此属性为“true”。
disable 布尔 false 当设置为“true”时,将禁用其功能。如果未提供值(空属性),则认为它设置为“true”。

Vue方法

Vue方法 说明
@trigger 触发刷新,调用你的处理程序。

处理程序

处理函数(指定为DOM元素属性)需要一个参数:

{
methods: {
refresher (done) {
// done - - 当您进行所有必要的更新时调用的函数。
      // 不要忘记调用它,否则刷新消息
      // 将继续显示

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