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

List滚动到底部提示

HarmonyOS
2024-05-26 11:15:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
honda1999

本文将使用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 })

实现效果

适配的版本信息

IDE版本:4.0.1.501

SDK版本:4.0.10.8

分享
微博
QQ
微信
回复
2024-05-27 11:01:07
相关问题
list组件无法滚动到底部
378浏览 • 1回复 待解决
List滚动条时长时短,求解决方案
549浏览 • 1回复 待解决
Harmony API9之后 GIS 解决方案哪些?
813浏览 • 1回复 待解决
抓包应用,求解决方案
530浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
149浏览 • 1回复 待解决
监听pdf是否已经滑动到底部失败
485浏览 • 1回复 待解决
连接网络信息获取方案吗?
278浏览 • 1回复 待解决
Text模拟隐私协议,方案吗?
375浏览 • 1回复 待解决
图片存储解决方案谁知道啊?
1124浏览 • 1回复 待解决
webview中跨域问题解决方案
513浏览 • 1回复 待解决
屏幕旋转计算,什么方案
410浏览 • 1回复 待解决
Listitem点击变色什么方法吗
586浏览 • 1回复 待解决
har和hsp转换,方案吗?
243浏览 • 1回复 待解决