ScrollView

API Reference: UI.ScrollView

ScrollView enables the user to view pages with content longer than the screen size via a scroll action.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Color = require('sf-core/ui/color');
const ScrollView = require('sf-core/ui/scrollview');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
},orientation : Page.Orientation.AUTO
});
var colors = ["#F25022","#7FBA00","#00A4EF","#FFB900","#6441A4"];
var myScrollView = new ScrollView({
flexGrow: 1,
margin: 80,
backgroundColor: Color.create("#00A1F1"),
align: ScrollView.Align.VERTICAL,
autoSizeEnabled : true
});
for (var i = 0; i < 10; i++) {
var flex = new FlexLayout();
flex.height = 100;
flex.backgroundColor = Color.create(colors[i%5]);
myScrollView.layout.addChild(flex);
};
this.layout.addChild(myScrollView);
myScrollView.layout.applyLayout();
}
);
module.exports = Page1;

Content Auto Sizing on ScrollView

To do the automatic calculation, you need to set scrollview.autoSizeEnabled property true and need to call scrollview.layout.applyLayout() function after every change.

Calculated auto size will be least ScrollView's size.

Usage

  • if autoSizeEnabled property is false, scrollView layout's children should have a fixed or minimum height for vertical scrolling.

  • if autoSizeEnabled property is false, ScrollView layout's children should have a fixed or minimum width for horizontal scrolling.