Skip to main content
Version: v3.x

setScrollMode

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

Set the scroll mode of the page.

Type​

function setScrollMode(option: Option): Result

Parameters​

Option​

PropertyTypeRequiredDefaultValueDescriptionAPI_LEVEL
modestringY-Page scroll mode, value reference page scroll mode constants2.0
optionsOptionsN-Other Options2.0

Options​

PropertyTypeRequiredDefaultValueDescriptionAPI_LEVEL
heightnumberN-Specify the height of a single item in Swiper, effective only if the scroll mode is SCROLL_MODE_SWIPER2.0
countnumberN-Specify the number of items in the Swiper, effective only if the scroll mode is SCROLL_MODE_SWIPER or SCROLL_MODE_SWIPER_HORIZONTAL2.0
widthnumberN-Specify the width of a single item in Swiper, effective only if the scroll mode is SCROLL_MODE_SWIPER_HORIZONTAL2.1
modeParamsFreeModeParams|SwipeModeParamsN-Parameters for the scroll mode3.0

FreeModeParams​

PropertyTypeDescriptionAPI_LEVEL
scroll_frame_func(params: ScrollObj) => voidThe callback function for each frame during scrolling3.0
scroll_complete_func(params: ScrollObj) => voidThe end of the scroll callback function3.0

ScrollObj​

PropertyTypeDescriptionAPI_LEVEL
typenumberTodo3.0
yoffsetnumberPixel offset on the y axis3.0

SwipeModeParams​

PropertyTypeDescriptionAPI_LEVEL
on_page(pageIndex: number) => voidCallback function after page flipping, pageIndex is the page index after page flipping, and the index starts from 03.0
crown_enablebooleanWhether to respond to crown events, the default response, you can use the crown to control page turning3.0

Result​

TypeDescription
numberIf true is returned, success is indicated

Constants​

Page scroll mode constants​

ConstantDescriptionAPI_LEVEL
SCROLL_MODE_FREEFree scrolling mode, system default scrolling mode2.0
SCROLL_MODE_SWIPERSwiper mode, vertical rotating map, walking lights, by configuring the height and number of individual pages can achieve the whole screen scrolling effect2.0
SCROLL_MODE_SWIPER_HORIZONTALSwiper mode, horizontal rotating map, walking lights, by configuring the width and number of individual pages can achieve the whole screen scrolling effect2.1

Example​

import { setScrollMode, SCROLL_MODE_SWIPER } from '@zos/page'

setScrollMode({
mode: SCROLL_MODE_SWIPER,
options: {
height: 480,
count: 10,
},
})