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

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