下拉刷新

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

安装

编辑 /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()
    }
  }
}

选项卡 处理后退按钮