RadListView Scrolling

RadListView provides API that allows developers to manually scroll to a particular item or with particular offset. It also exposes several events that can be used to detect changes in the scroll offset triggered by the end user. The following methods related to Scrolling are available:

• scrollWithAmount() - scrolls the list with a given amount of pixels. If the animate parameter is true - the scrolling will be animated
• scrollToIndex() - scrolls the list so that the data item at the particular index is brought to visibility. If the animate argument is true - the scrolling will be animated. The value of the snapMode argument determines the position of the target item when it is brought into view. The possible values for this argument are enlisted by the ListViewItemSnapMode enum.
• getScrollOffset() - returns the current scroll offset of the list

Scroll Events

You can use the following events to detect changes in the scrolling behavior of RadListView:

• scrollStartedEvent - fired when the list starts scrolling
• scrolledEvent - fired each time the scroll offset of the list is changed
• scrollDragEndedEvent - fired each time the user raises their finger from the device's screen as a result of a scrolling gesture
• scrollEndedEvent - fired when the list stops scrolling

All scrolling events provide an instance of the ListViewScrollEventData class to their handlers which provides the current scroll offset of the list through its scrollOffset property.

Note that to work scrollToIndex method in iOS properly, make sure you use the correct layout for the RadListView component: ListViewLinearLayout with fixed itemHeight or to set ListViewStaggeredLayout

Example

The following code snippet demonstrates how to play with scrolling:

export default {
  name: 'ScrollTo',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <StackLayout>
      <Label class="big header" :text="scrollText"></Label>
      <RadListView ref="listView"
                   for="item in itemList"
                   @itemTap="onItemTap"
                   @loaded="onLoaded"
                   @scrolled="onScrolled">
        <v-template>
          <StackLayout class="item" orientation="vertical">
            <Label :text="item.name" class="nameLabel"></Label>
            <Label :text="item.description" class="descriptionLabel"></Label>
          </StackLayout>
        </v-template>
      </RadListView>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      title: description,
      scrollOffset: 0,
      itemList: getItemList(100),
    };
  },
  computed: {
    scrollText () {
      return `Scrolled to ${this.scrollOffset} offset`;
    },
  },
  methods: {
    onItemTap ({ item }) {
      console.log(`Tapped on ${item.name}`);
    },
    onLoaded () {
      // 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(() => {
        const indexToScroll = 49;
        console.log('Programmatic scrolling to ' + this.itemList[indexToScroll].name + '... ');
        this.$refs.listView.scrollToIndex(indexToScroll, false, ListViewItemSnapMode.Start);
      });
    },
    onScrolled ({ scrollOffset }) {
      this.scrollOffset = scrollOffset;
    },
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    }
  }
};

Horizontal Scrolling

Just set <RadListView orientation="horizontal" ...> and the scroll will be horizontal.