Skip to main content
版本:v3

setScrollMode

API_LEVEL 2.0 开始支持,API 兼容性请参考 API_LEVEL

设置页面的滚动模式。

类型

function setScrollMode(option: Option): Result

参数

Option

属性类型必填默认值说明API_LEVEL
modestring-页面滚动模式,值参考页面滚动模式常量2.0
optionsOptions-其他选项2.0

Options

属性类型必填默认值说明API_LEVEL
heightnumber-指定 Swiper 中单个项目的高度,仅当页面滚动模式为 SCROLL_MODE_SWIPER 生效2.0
countnumber-指定 Swiper 中项目的数量,仅当页面滚动模式为 SCROLL_MODE_SWIPERSCROLL_MODE_SWIPER_HORIZONTAL 生效2.0
widthnumber-指定 Swiper 中单个项目的宽度,仅当页面滚动模式为 SCROLL_MODE_SWIPER_HORIZONTAL 生效2.1
modeParamsFreeModeParams|SwipeModeParams-模式的控制参数3.0

FreeModeParams

属性类型说明API_LEVEL
scroll_frame_func(params: ScrollObj) => void滚动过程中每帧的回调函数3.0
scroll_complete_func(params: ScrollObj) => void滚动结束的回调函数3.0

ScrollObj

属性类型说明API_LEVEL
typenumber待补充3.0
yoffsetnumbery 轴偏移的像素3.0

SwipeModeParams

属性类型说明API_LEVEL
on_page(pageIndex: number) => void翻页完成后的回调函数,pageIndex 为翻页完成后的页面索引,索引从 0 开始3.0
crown_enableboolean是否响应表冠事件,默认响应,可以通过表冠来控制翻页3.0

Result

类型说明
number如果返回 true 则表明成功

常量

页面滚动模式常量

常量说明API_LEVEL
SCROLL_MODE_FREE自由滚动,系统默认滚动模式2.0
SCROLL_MODE_SWIPERSwiper 模式,竖向轮播图、走马灯,通过配置单个页面高度和数量可以做到整屏滚动效果2.0
SCROLL_MODE_SWIPER_HORIZONTALSwiper 模式,横向轮播图、走马灯,通过配置单个页面宽度和数量可以做到整屏滚动效果2.1

代码示例

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

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