Skip to main content
Version: v3+

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
bouncebooleanControl whether the page rebound effect is turned on. When the page content exceeds one screen, it is turned on by default. If the page content is less than one screen, it is turned off by default. This parameter needs to be passed in the build lifecycle to take effect.3.6

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,
},
})