HarmonyOS 鸿蒙Next List第一个可见的ListItem

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next List第一个可见的ListItem

List怎么获取第一个可见的ListItem，是否有相关demo
 

Harmonyos Next教程
2 回复

参考：

[@Entry](/user/Entry)

[@Component](/user/Component)

struct ListExample {

  private arr: (number | string)[] =

    [0, '概览', '周边', 3, 4, '房源', 6, 7, '小区', 9, 10, 11, 12, 13, 14, 15]

  private tabArr: string[] = ['概览', '周边', '房源', '小区']

  [@State](/user/State) currentIndex: number = 0

  build() {

    Column() {

      Row() {

        ForEach(this.tabArr, (item: string, index: number) => {

          Text(item)

            .fontColor(this.currentIndex === index ? Color.Blue : '')

        })

      }

      .width('100%')

      .padding({ left: 20 })

      .alignItems(VerticalAlign.Top)

      List({ space: 20, initialIndex: 0 }) {

        ForEach(this.arr, (item: number) => {

          ListItem() {

            Text('' + item)

              .width('100%')

              .height(100)

              .fontSize(16)

              .textAlign(TextAlign.Center)

              .borderRadius(10)

              .backgroundColor(0xFFFFFF)

          }

        }, (item: string) => item)

      }

      .listDirection(Axis.Vertical) // 排列方向

      .scrollBar(BarState.Off)

      .friction(0.6)

      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线

      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring

      .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {

        console.info('first' + firstIndex)

        console.info('last' + lastIndex)

        console.info('center' + centerIndex)

        if (firstIndex == 1) {

          this.currentIndex = 0

        }

        else if (firstIndex == 2) {

          this.currentIndex = 1

        }

        else if (firstIndex == 5) {

          this.currentIndex = 2

        }

        else if (firstIndex == 8) {

          this.currentIndex = 3

        }

      })

      .width('90%')

    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })

  }

}

更多关于HarmonyOS 鸿蒙Next List第一个可见的ListItem的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，要获取Next List（列表）中第一个可见的ListItem，通常需要通过访问列表控件的视图管理器或布局管理器来实现。以下是直接获取该元素的方法概述：

HarmonyOS提供了丰富的UI组件框架，包括ListContainer等列表控件。要确定第一个可见的ListItem，可以使用ListContainer的API接口。具体步骤如下：

  1. 获取ListContainer实例：首先，通过UI布局文件或代码动态创建并获取ListContainer的实例。

  2. 调用相关API：利用ListContainer的API，如getFirstVisibleItem()或类似方法（具体方法名可能根据API版本有所不同），该方法将返回当前列表中第一个可见的ListItem的索引。

  3. 获取ListItem对象：通过索引值，结合ListContainer的适配器（Adapter），可以获取到具体的ListItem对象或其数据模型。

示例代码片段（伪代码）：

var listContainer = getUIElementById('listContainerId'); // 获取ListContainer实例
var firstVisibleIndex = listContainer.getFirstVisibleItem(); // 获取第一个可见元素的索引
var firstVisibleItem = listContainer.getAdapter().getItem(firstVisibleIndex); // 获取具体的ListItem对象

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部