ScrollView
API Reference: UI.ScrollView
ScrollView enables the user to view pages with content longer than the screen size via a scroll action.
note
The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:
Adding Component From CodeAs a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation
UI Editor Basicsimport PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import { styleableContainerComponentMixin } from '@smartface/styling-context';
import ScrollView from "@smartface/native/ui/scrollview";
import { themeService } from "theme";
import FlexLayout from "@smartface/native/ui/flexlayout";
class StyleableFlexLayout extends styleableContainerComponentMixin(FlexLayout) {}
class StyleableScrollView extends styleableContainerComponentMixin(ScrollView) {}
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
colors: string[] = ["#F25022", "#7FBA00", "#00A4EF", "#FFB900", "#6441A4"];
myScrollView: ScrollView;
constructor(private router?: Router, private route?: Route) {
super({});
}
// The page design has been made from the code for better
// showcase purposes. As a best practice, remove this and
// use WYSIWYG editor to style your pages.
centerizeTheChildrenLayout() {
this.dispatch({
type: "updateUserStyle",
userStyle: {
flexProps: {
flexDirection: 'ROW',
justifyContent: 'CENTER',
alignItems: 'CENTER'
}
}
})
}
onShow() {
super.onShow();
const { headerBar } = this;
}
onLoad() {
super.onLoad();
this.centerizeTheChildrenLayout();
this.colors = ["#F25022", "#7FBA00", "#00A4EF", "#FFB900", "#6441A4"];
this.myScrollView = new StyleableScrollView({
autoSizeEnabled: true,
});
themeService.addGlobalComponent(this.myScrollView.layout, "myScrollViewLayout");
for (let i = 0; i < 10; i++) {
let flex = new StyleableFlexLayout();
// @ts-ignore
this.myScrollView.layout.addChild(flex, "flex", ".sf-flexLayout", {
height: 100,
backgroundColor: this.colors[i % 5],
});
}
this.addChild(this.myScrollView, "myScrollView", null, {
width: 400,
backgroundColor: "#00A1F1",
});
this.myScrollView.layout.applyLayout();
}
}
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.
info
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.

