NativeScript & Vue.JS

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:

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


The following code snippet demonstrates how to play with scrolling:

export default {
  name: 'ScrollTo',
  description: description,
  template: `
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
      <Label class="big header" :text="scrollText"></Label>
      <RadListView ref="listView"
                   for="item in itemList"
          <StackLayout class="item" orientation="vertical">
            <Label :text="" class="nameLabel"></Label>
            <Label :text="item.description" class="descriptionLabel"></Label>
  data () {
    return {
      title: description,
      scrollOffset: 0,
      itemList: getItemList(100),
  computed: {
    scrollText () {
      return `Scrolled to ${this.scrollOffset} offset`;
  methods: {
    onItemTap ({ item }) {
      console.log(`Tapped on ${}`);
    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() {

Horizontal Scrolling

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