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

List滚动到底部提示

HarmonyOS
2024-05-26 11:15:17
浏览
收藏 0
回答 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 })

实现效果

适配的版本信息

IDE版本:4.0.1.501

SDK版本:4.0.10.8

分享
微博
QQ
微信
回复
2024-05-27 11:01:07
相关问题
list组件无法滚动到底部
1285浏览 • 1回复 待解决
List滚动条时长时短,求解决方案
970浏览 • 1回复 待解决
包大小优化,有没有解决方案
239浏览 • 2回复 待解决
图像处理库是否替代解决方案
379浏览 • 0回复 待解决
HarmonyOS访问相册有解决方案
372浏览 • 1回复 待解决
确认网络状况解决方案
613浏览 • 1回复 待解决
HarmonyOS 通知推送解决方案
43浏览 • 1回复 待解决
高级图表实现解决方案
684浏览 • 1回复 待解决
HarmonyOS代码封装解决方案
682浏览 • 1回复 待解决
Harmony API9之后 GIS 解决方案哪些?
2179浏览 • 1回复 待解决
抓包应用,求解决方案
1992浏览 • 1回复 待解决
HarmonyOS事件通信能力解决方案
884浏览 • 1回复 待解决
HarmonyOS C++模块引用解决方案
478浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
723浏览 • 1回复 待解决