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

List滚动到底部提示

HarmonyOS

morning_dxm

2024-05-26 11:15:17

浏览

回答 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}) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

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}) 
        } 
      })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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 })1.
2.
3.
4.
5.
6.
7.

实现效果