diff --git a/zh-cn/application-dev/reference/apis/js-apis-webview.md b/zh-cn/application-dev/reference/apis/js-apis-webview.md index 3ce10286c54f862cfc3cdf393d357342fe5d0337..9e5ed5f6e9576ab31d1afdd108a419ca417527eb 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-webview.md +++ b/zh-cn/application-dev/reference/apis/js-apis-webview.md @@ -2122,6 +2122,222 @@ struct WebComponent { } ``` +### scrollTo + +scrollTo(x:number, y:number): void + +将页面滚动到指定的绝对位置。 + +**系统能力：** SystemCapability.Web.Webview.Core + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | -------- | ---- | ---------------------- | +| x | number | 是 | 绝对位置的水平坐标，当传入数值为负数时，按照传入0处理。 | +| y | number | 是 | 绝对位置的垂直坐标，当传入数值为负数时，按照传入0处理。| + +**错误码：** + +以下错误码的详细介绍请参见 [webview错误码](../errorcodes/errorcode-webview.md) + +| 错误码ID | 错误信息 | +| -------- | ------------------------------------------------------------ | +| 17100001 | Init error. The WebviewController must be associated with a Web component. | + +**示例：** + +```ts +// xxx.ets +import web_webview from '@ohos.web.webview'; + +@Entry +@Component +struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + + build() { + Column() { + Button('scrollTo') + .onClick(() => { + try { + this.controller.scrollTo(50, 50); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } +} +``` + +```html + + + + + Demo + + + +Scroll Test + + +``` + +### scrollBy + +scrollBy(deltaX:number, deltaY:number): void + +将页面滚动指定的偏移量。 + +**系统能力：** SystemCapability.Web.Webview.Core + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | -------- | ---- | ---------------------- | +| deltaX | number | 是 | 水平偏移量，其中水平向右为正方向。 | +| deltaY | number | 是 | 垂直偏移量，其中垂直向下为正方向。 | + +**错误码：** + +以下错误码的详细介绍请参见 [webview错误码](../errorcodes/errorcode-webview.md) + +| 错误码ID | 错误信息 | +| -------- | ------------------------------------------------------------ | +| 17100001 | Init error. The WebviewController must be associated with a Web component. | + +**示例：** + +```ts +// xxx.ets +import web_webview from '@ohos.web.webview'; + +@Entry +@Component +struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + + build() { + Column() { + Button('scrollBy') + .onClick(() => { + try { + this.controller.scrollBy(50, 50); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } +} +``` + +```html + + + + + Demo + + + +Scroll Test + + +``` + +### slideScroll + +slideScroll(vx:number, vy:number): void + +按照指定速度模拟对页面的轻扫滚动动作。 + +**系统能力：** SystemCapability.Web.Webview.Core + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | -------- | ---- | ---------------------- | +| vx | number | 是 | 轻扫滚动的水平速度分量，其中水平向右为速度正方向。 | +| vy | number | 是 | 轻扫滚动的垂直速度分量，其中垂直向下为速度正方向。 | + +**错误码：** + +以下错误码的详细介绍请参见 [webview错误码](../errorcodes/errorcode-webview.md) + +| 错误码ID | 错误信息 | +| -------- | ------------------------------------------------------------ | +| 17100001 | Init error. The WebviewController must be associated with a Web component. | + +**示例：** + +```ts +// xxx.ets +import web_webview from '@ohos.web.webview'; + +@Entry +@Component +struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + + build() { + Column() { + Button('slideScroll') + .onClick(() => { + try { + this.controller.slideScroll(500, 500); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } +} +``` + +```html + + + + + Demo + + + +Scroll Test + + +``` + ## WebCookieManager 通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookieManager实例。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md index abc6e9ad0474181b6f2910decbbe4762d08dfcec..52142550d9516d15b610be4d4ce266df8ede2b48 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -522,6 +522,108 @@ multiWindowAccess(multiWindow: boolean) } ``` +### horizontalScrollBarAccess9+ + +horizontalScrollBarAccess(horizontalScrollBar: boolean) + +设置是否显示横向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。 + +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ----------- | ------- | ---- | ----- | ------------ | +| horizontalScrollBar | boolean | 是 | true | 设置是否显示横向滚动条。 | + +**示例：** + + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController() + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .horizontalScrollBarAccess(true) + } + } + } + ``` + + ```html + + + + + Demo + + + + Scroll Test + + + ``` + +### verticalScrollBarAccess9+ + +verticalScrollBarAccess(verticalScrollBar: boolean) + +设置是否显示纵向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。 + +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ----------- | ------- | ---- | ----- | ------------ | +| verticalScrollBarAccess | boolean | 是 | true | 设置是否显示纵向滚动条。 | + +**示例：** + + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController() + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .verticalScrollBarAccess(true) + } + } + } + ``` + + ```html + + + + + Demo + + + + Scroll Test + + + ``` + ### cacheMode cacheMode(cacheMode: CacheMode)