RadListView Pull to Refresh

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 {
  name: 'PullToRefresh',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <StackLayout>
      <RadListView ref="listView"
                   for="fruit in fruitList"
                   pullToRefresh="true"
                   @itemTap="onItemTap"
                   @pullToRefreshInitiated="onPullToRefreshInitiated">
        <v-template>
          <StackLayout class="item" orientation="vertical">
            <Label :text="fruit.name" class="titleLabel"></Label>
            <StackLayout height="1" backgroundColor="#EEEEEE"></StackLayout>
          </StackLayout>
        </v-template>

        <v-template name="footer">
          <StackLayout class="footer">
            <Label :text="footerText"></Label>
          </StackLayout>
        </v-template>
      </RadListView>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      title: description,
      fruitList: [
        {
          name: 'Apple',
        },
        {
          name: 'Orange',
        },
        {
          name: 'Tomato',
        }
      ],
    };
  },
  computed: {
    footerText () {
      return `List with ${this.fruitList.length} items`;
    },
  },
  methods: {
    onPullToRefreshInitiated ({ object }) {
      console.log('Pulling...');
      // in order to avoid race conditions (only on iOS),
      // in which the UI may not be completely updated here
      // we use this.$nextTick call
      this.$nextTick(() => {
        this.fruitList.push({
          name: 'Berry',
        });
        object.notifyPullToRefreshFinished();
      });
    },
    onItemTap ({ item }) {
      console.log(`Tapped on ${item.name}`);
    },
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    }
  }
};