#鸿蒙通关秘籍#实现长列表滑动到上次浏览记录的流畅动画效果

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
墨s倾城ASIC

为了实现长列表滑动到上次浏览记录时的流畅动画效果,可以采取以下步骤:

  1. 使用LazyForEach结合cachedCount@Reusable来实现列表懒加载,并缓存附近的组件,提高列表性能。

    List({ space: ListConstants.LIST_SPACE, scroller: this.listScroller }) {
       LazyForEach(momentData, (moment: FriendMoment) => {
         ListItem() {
           OneMoment({ moment: moment })
         }
       }, (moment: FriendMoment) => moment.id)
    }
    .cachedCount(this.cachedCountNumber)
    .width($r('app.string.layout_100'))
    .height($r('app.string.layout_100'))
    .listDirection(Axis.Vertical)
    .divider({
       strokeWidth: $r('app.integer.friends_page_divider_width'),
       color: $r('app.color.friends_page_divider_color'),
       startMargin: $r('app.integer.list_history_list_divider_margin'),
       endMargin: $r('app.integer.list_history_list_divider_margin')
    })
    .onScrollIndex((first: number) => {
       this.firstIndex = first;
    })
    
  2. 在页面退出或者切换时,使用currentOffset方法记录列表当前的滑动偏移量,以便下次恢复到该位置。

    this.historyOffset = this.listScroller.currentOffset().yOffset;
    
  3. 使用scrollTo配合animation属性,实现流畅的滑动体验。如果上次没有记录位置,则滑动到默认位置。

    this.listScroller.scrollTo({
      xOffset: 0,
      yOffset: this.historyOffset === 0 ? this.DEFAULT_OFFSET : this.historyOffset,
      animation: { duration: this.ANIMATION_DURATION, curve: Curve.LinearOutSlowIn }
    })
    

通过这些方法,能够高效地实现用户在长列表中的浏览位置记忆及其恢复,提升用户体验。

分享
微博
QQ
微信
回复
1天前
相关问题
网站如何记录上次登陆时间?
2139浏览 • 1回复 待解决