List滚动到底部提示，是否有好的解决方案？

List滚动到底部提示

HarmonyOS

morning_dxm

2024-05-26 11:15:17

浏览

回答 1

待解决

回答 1

按赞同

按时间

开心的兔子

本文将使用List实现拉动到底部提示。

使用的核心API

List

核心代码解释

1. 使用List，将最后一个Item隐藏。

if (item == this.arr.length-1) { 
  ListItem() { 
    Stack({ alignContent: Alignment.End }) { 
      Rect({ width: this.listHeight/2, height: this.listHeight }) 
        .fill('#ffc8c7c7') 
        .align(Alignment.End) 
 
      Circle({ width: this.listHeight, height: this.listHeight }) 
        .fill('#ffc8c7c7') 
        .margin({ left: 8 }) 
      Text(this.loadText) 
        .height(this.endItemWidth-20) 
        .width('100%') 
        .textAlign(TextAlign.Center) 
        .fontColor('#999999') 
        .fontSize(18) 
        .margin({ right: 20 }) 
    } 
    .width(this.endItemWidth) 
    .height('100%') 
    .margin({right:this.endItemMarginRight}) 
  } 
}

2.监听滑动到底部，展示末尾Item。

     .onScroll((scrollOffset: number, scrollState: ScrollState) => { 
        console.info('yinhongboTest',`onScroll currentOffset = ` + this.scroller.currentOffset().xOffset+', scrollLong = '+this.scrollLong) 
        if (this.scroller.isAtEnd() && this.scroller.currentOffset().xOffset>this.scrollLong-(this.itemWidth/2)) { 
          // 修改文本 
          this.loadText = '松手\n进入'; 
        } 
        else { 
          this.loadText = '左滑\n全部'; 
        } 
        if (this.scroller.isAtEnd() && this.scroller.currentOffset().xOffset>this.scrollLong) { 
          // 达到限制 
          this.scroller.scrollTo({xOffset:this.scrollLong,yOffset:0}) 
        } 
      })

3. 末尾Item伪动画。

      Rect({ width: this.listHeight/2, height: this.listHeight }) 
                 .fill('#ffc8c7c7') 
                 .align(Alignment.End) 
  
               Circle({ width: this.listHeight, height: this.listHeight }) 
                 .fill('#ffc8c7c7') 
                 .margin({ left: 8 })

实现效果