ScrollView

Role#

A ScrollView is a vertical RecyclingListView of ScrollItemView. A ScrollItemView is basically a View with internal navigation.

You can inherit of ScrollItemView or adding MScrollItem trait to your view to transform your view as ScrollItemView.

Events#

ScrollView emits some events:

• scrollView.selectionChange => onScrollViewSelectionChange() when item in scrollView has changed,
• scrollView.start => onScrollViewStart() at the start of the scrollView,
• scrollView.end => onScrollViewEnd() at the end of the scrollView,
• scrollView.focus => onScrollViewFocus() when the scrollView is focused.

Properties#

• The number property itemMargin represents the marge between two ScrollItemView.
• The object property dataItem represents the data of the current data of scrollItem.
• The number property currentViewIndex represents the current selected view index.
• The Object property indexMap is used to save index of horizontal list of scrollView. ⚠ WARNING: Do not override it. It should be private.

You can send indexMap under options parameter in your setData(data, options) to initialize index of each scrollItemView.

How does it work?#

A ScrollView takes a ListModel as data.

You can use a ScrollView to get a vertical list of rails and you need to have a ListModel of ListModel as data of ScrollView.

Navigation behavior#

ScrollView gets internal up/down/right/left/back API methods.

To navigate in the ScrollView, your screen should call for example:

export default $Screen.declare("MyScreen", {
  inputs: ["keypress.UP", "keypress.DOWN", "keypress.LEFT", "keypress.RIGHT", "keypress.BACK"],
  methods: {
    onKeypressRIGHT: function (key) { return this.scrollView.right(key); },

    onKeypressLEFT: function (key) { return this.scrollView.left(key); },

    onKeypressUP: function (key) { return this.scrollView.up(key); },

    onKeypressDOWN: function (key) { return this.scrollView.down(key); },

    onKeypressBACK: function (key) { return this.scrollView.back(key); }
  }
});

API Reference#

This UI component is part of Dana’s vendor named @dana/vendor-components which includes a JSDoc description.