HarmonyOS List组件中ListItem能否获取到当前的坐标点,如何判断距离屏幕中间的距离

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

可以使用一个数组来记录List中当前显示的ListItem,根据ListItem的Index和当前List控件滚动的距离 可以获取到显示的ListItem距离屏幕中间的距离

参考示例如下:

@Entry
@Component
struct ListDemoPage {
  scroller: Scroller = new Scroller()
  imgList: Resource[] = []
  @State endIndex: number = -1
  // 记录需要上报的item的index
  @State trackArr: number[] = []

  aboutToAppear(): void {
    for (let i = 0; i < 11; i++) {
      this.imgList.push($r('app.media.preview'))
    }
  }

  build() {
    Column() {
      List({ scroller: this.scroller,space: 10 }) {
        ForEach(this.imgList, (item: Resource, index: number) => {
          ListItem() {
            Image(item)
              .width(350)
              .height('100%')
              .objectFit(ImageFit.Contain)
              .borderRadius(4)
          }
          .height(500)
          .backgroundColor(Color.Gray)
          .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
            if (isVisible && currentRatio >= 1.0) {
              if (this.trackArr.indexOf(index) === -1) {
                this.trackArr.push(index)
              }
            }
            if (!isVisible) {
              if (this.trackArr.indexOf(index) > -1) {
                this.trackArr.splice(this.trackArr.indexOf(index), 1)
              }
            }
          })
        }, (item: Resource) => JSON.stringify(item))
      }
      .onScrollIndex((first: number, end: number, center: number) => {
        this.endIndex = center
      })
      .onScrollStop(() => {
        console.log('result array ==> ' + JSON.stringify(this.trackArr))
      })
      .scrollBar(BarState.Off)
      .width('100%')
      .height('100%')
      .edgeEffect(EdgeEffect.None)
      .backgroundColor(Color.Transparent)
    }
    .width('100%')
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
如何获取List组件滚动条滚动距离
2599浏览 • 1回复 待解决
如何监听List组件总滑动距离
2177浏览 • 1回复 待解决
百度地图坐标系影响距离计算吗?
3151浏览 • 1回复 待解决
HarmonyOS 底部安全距离是怎么获取
694浏览 • 1回复 待解决
HarmonyOS 获取view在屏幕坐标
77浏览 • 1回复 待解决
Tabs滑动距离问题有哪些?
380浏览 • 1回复 待解决