Overview

Pull-to-refresh allows you to implement a mechanism for refreshing ListView's content upon user's request. The request is done by swiping (pulling) down the list and releasing it. This experience is common in many mobile apps and is used in scenarios where a list needs to be updated with the most recent changes.

Using Pull-to-Refresh with RadListView for Vue

To enable the pull-to-refresh feature you need to follow the steps outlined below:

  1. Set the pullToRefresh property on RadListView to true.
  2. Provide a handler for the pullToRefreshInitiated event which is fired when the end user requests a data refresh.
  3. Call the notifyPullToRefreshFinished() method on RadListView when the data request has been finished and the list has been updated.

The following template demonstrates a simple scenario in which the pull-to-refresh feature is used:

export default {
  template: `
  <Page>
    <StackLayout>
      <RadListView ref="listView"
                   for="fruit in fruitList"
                   pullToRefresh="true"
                   @pullToRefreshInitiated="onPullToRefreshInitiated">
        <v-template name="header">
          <StackLayout class="header">
            <Label text="Pull to refresh"></Label>
          </StackLayout>
        </v-template>

        <v-template>
          <StackLayout class="item" orientation="vertical">
            <Label :text="fruit.name">
            </Label>
          </StackLayout>
        </v-template>
      </RadListView>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      fruitList: [
        { name: 'Apple' },
        { name: 'Orange' },
        { name: 'Tomato' },
      ],
    };
  },
  methods: {
    onPullToRefreshInitiated ({ object }) {
      console.log('Pulling...');
      setTimeout(() => {
        this.fruitList.push({
          name: 'Berry',
        });
        object.notifyPullToRefreshFinished();
      })
    },
  }
};