HarmonyOS list web scroll 联动

API 12支持renderMode: RenderMode.SYNC_RENDER 属性: Web组件统一渲染模式

可以参考如下demo:

import { router } from '@kit.ArkUI';
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct SxxActiveDetailPage {
  @State articleUrl: string[] = [];
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  private scroller: Scroller = new Scroller();
  @State urls: string[] =
    ["https://www/",
      "https://www/"]

  aboutToAppear() {
  }

  build() {
    Column() {
      Column() {
        List({ scroller: this.scroller }) {
          ForEach(this.urls, (item: string) => {
            ListItem() {
              Web({ src: item, controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
                .fileAccess(true)
                .domStorageAccess(true)
                .javaScriptAccess(true)
                .imageAccess(true)//是否允许自动加载图片资源，默认允许。
                .zoomAccess(true)
                .databaseAccess(false)//设置是否开启数据库存储API权限
                .verticalScrollBarAccess(false)
                .layoutMode(WebLayoutMode.FIT_CONTENT)

            }.width('100%')

          }, (item: string) => JSON.stringify(item))
        }
        .backgroundColor(Color.White)
        .alignListItem(ListItemAlign.Start)

      }
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Start)
      .width('100%')
      .height('100%')
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.