Attributes
bounces
iOS
Desktop
Harmony
1.4
// @defaultValue: true
bounces?: boolean;
Enable bounce effect
Android
iOS
Desktop
Harmony
1.4
// @defaultValue: true
'enable-scroll'?: boolean;
Enable dragging
Android
iOS
Desktop
Harmony
2.17
// @defaultValue: 0
'initial-scroll-offset'?: number;
Initial scroll position, only effective once, in PX
Android
iOS
Harmony
2.17
// @defaultValue: 0
'initial-scroll-to-index'?: number;
Scroll to specified child node on first screen, only effective once. All direct child nodes must be flatten=false.
lower-threshold
Android
iOS
Desktop
Harmony
1.4
// @defaultValue: 0
'lower-threshold'?: number;
Set upper threshold to bindscrolltoupper event.
iOS
Desktop
Harmony
1.4
// @defaultValue: true
'scroll-bar-enable'?: boolean;
Enable scrollbar
Android
iOS
Desktop
Harmony
3.0
// @defaultValue: 'vertical'
'scroll-orientation'?: 'vertical' | 'horizontal';
Replacement of scroll-x and scroll-y
upper-threshold
Android
iOS
Desktop
Harmony
1.4
// @defaultValue: 0
'upper-threshold'?: number;
Set upper threshold to bindscrolltoupper event.
Events
Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.
bindcontentsizechanged
Android
iOS
Harmony
1.6
bindcontentsizechanged = (e: ContentSizeChangedEvent) => {};
This event is triggered when the scrollview's content size changed.
Android
iOS
Desktop
Harmony
1.4
bindscroll = (e: ScrollEvent) => {};
This event is triggered when the scrollview is scrolling.
Android
iOS
Desktop
Harmony
1.6
bindscrollend = (e: ScrollEndEvent) => {};
This event is triggered when the scrollview's scroll ended.
Android
iOS
Harmony
1.4
bindscrolltolower = (e: ScrollToLowerEvent) => {};
This event is triggered when the lower/right edge of the scrolling area intersects with the visible area defined by the lowerThreshold.
Android
iOS
Harmony
1.4
bindscrolltoupper = (e: ScrollToUpperEvent) => {};
This event is triggered when the upper/left edge of the scrolling area intersects with the visible area defined by the upperThreshold.
Methods
Frontend can invoke component methods via the SelectorQuery API.
Android
iOS
Desktop
Harmony
lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'autoScroll',
params: {
/**
* The distance of each second's scrolling, which supports positive and negative values. The unit of distance can be "px", "rpx", "ppx", or null (for iOS, the value must be greater than 1/screen.scale px).
* @Android
* @iOS
* @Harmony
* @PC
*/
rate: 60,
/**
* Start/stop automatic scrolling.
* @Android
* @iOS
* @Harmony
* @PC
*/
start: true,
},
success: function (res) {},
fail: function (res) {},
})
.exec();
Automatic scrolling
Android
iOS
Harmony
interface GetScrollInfoResult {
/**
* Total scrollable range along orientation, in PX
* @Android
* @iOS
* @Harmony
* @PC
*/
scrollRange: number;
/**
* Content offset on X-axis, in PX
* @Android
* @iOS
* @Harmony
* @PC
*/
scrollX: number;
/**
* Content offset on Y-axis, in PX
* @Android
* @iOS
* @Harmony
* @PC
*/
scrollY: number;
}
lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'getScrollInfo',
success: function (res: GetScrollInfoResult) {},
fail: function (res) {},
})
.exec();
Get scroll info
Android
iOS
Harmony
interface ScrollByParams {
/**
* Offset to scroll
*/
offset?: number;
}
const params: ScrollByParams = { offset: 100 };
lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'scrollBy',
params,
success: function (res) {},
fail: function (res) {},
})
.exec();
Scroll by specified offset
Android
iOS
Desktop
Harmony
interface ScrollToParams {
/**
* Target item index
* @defaultValue 0
*/
index?: number;
/**
* Offset relative to target node
*/
offset?: number;
/**
* Enable scroll animation
*/
smooth?: boolean;
}
const params: ScrollToParams = { index: 0, offset: 0, smooth: true };
lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'scrollTo',
params,
success: function (res) {},
fail: function (res) {},
})
.exec();
Scroll to specified position
