#<viewpager> XElement

<viewpager> is a horizontally swipeable paging component. It is commonly used to build tabbed paging experiences.

#Usage

Use <viewpager> together with <viewpager-item> to create horizontally paged content.

#Recommended Usage

• Explicitly set the width of <viewpager>: width: 100%;
• Explicitly set the layout direction of <viewpager>: display: flex; flex-direction: row;
• Explicitly constrain the size and shrinking behavior of <viewpager-item>: width: 100%; flex-shrink: 0;
• The direct children of <viewpager> must be <viewpager-item>.

viewpagersrc/base/index.tsx

Code

Preview

#Attributes

#android-always-overscroll

// @defaultValue: false
'android-always-overscroll'?: boolean;

On Android, this attribute is used to control the interaction behavior when scrolling to the edges. Setting it to true enables the default bounce effect, while setting it to false disables the bounce effect. The default value is false.

#android-force-can-scroll

// @defaultValue: false
'android-force-can-scroll'?: boolean;

On Android, when this attribute is set to true, gestures are not passed to the parent container when the viewpager is already at the beginning or end.

#bounces

// @defaultValue: true
bounces?: boolean;

Whether to enable the bounce effect. Note that this effect is not available on Android. On PC, only macOS supports this feature.

#enable-scroll

// @defaultValue: true
'enable-scroll'?: boolean;

Enables horizontal swipe gestures.

#initial-select-index

// @defaultValue: 0
'initial-select-index'?: number;

Selects the specified page during initialization, specifically when child nodes are first available.

#ios-gesture-direction

// @defaultValue: false
'ios-gesture-direction'?: boolean;

When enabled, horizontal swipe events from the outer container (a horizontal UIScrollView) can be recognized when the viewpager is already at the beginning or end.

#ios-gesture-offset

// @defaultValue: 0
'ios-gesture-offset'?: number;

When the finger touches within [0, value] from the left edge of the screen, the horizontal swipe gesture is ignored so the native iOS swipe-back gesture can respond directly. This is not available on Android.

#ios-recognized-gesture-class

'ios-recognized-gesture-class'?: string;

The class name of the UIGestureRecognizer that may be recognized simultaneously with the viewpager. This property is designed to let a UIPanGesture work together with the viewpager.

#ios-recognized-view-tag

// @defaultValue: 0
'ios-recognized-view-tag'?: number;

The UIView tag used to identify the view associated with the UIGestureRecognizer specified by ios-recognized-gesture-class. This property is designed to let a UIPanGesture work together with the viewpager.

#keep-item-view

// @defaultValue: false
'keep-item-view'?: boolean;

Whether to enable lazy loading based on early exposure. Use it together with lazyComponent.

#Events

Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.

#bindchange

bindchange = (e: ViewPagerChangeEvent) => {};

Page change event. It is triggered only after the UI has fully switched to the next page.

#bindoffsetchange

bindoffsetchange = (e: ViewPagerOffsetChangeEvent) => {};

Callback for page transition progress. The value is expressed in page indexes. For example, moving from page 0 to page 1 yields values from 0 to 1, and moving from page 1 to page 2 yields values from 1 to 2.

#bindwillchange

bindwillchange = (e: ViewPagerWillChangeEvent) => {};

Page will change event.

#Methods

Frontend can invoke component methods via the SelectorQuery API.

#selectTab

lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'selectTab',
params: {
/**
_ The index to be scrolled to.
_ @Android
_ @iOS
_ @Harmony
_ @PC
_/
index: number;
/**
_ Whether an animation is needed. The default value is true.
_ @Android
_ @iOS
_ @Harmony
_ @PC
_/
smooth: boolean;
};
success: function (res) {},
fail: function (res) {},
})
.exec();

Scrolls to the specified page.

#Compatibility