HarmonyOS List如何将初始渲染位置设置为底部对齐

List目前默认渲染是从首个元素渲染,实际需求是显示最后的几个item底部对齐。目前是通过滑动实现,但是有图片等场景由于有主线程耗时,会有明显的滑动感知到体验不好。如果不通过滑动默认就显示底部元素。

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

参考示例如下:

@Entry
@Component
struct Chat {
  // 这个列表代表聊天内容,每次发送和接收消息时,把聊天内容加入这个列表
  // 当监听到列表发生变化时,执行函数scrollerBottom,把list滑动到最底部
  @State @Watch('scrollerBottom') list: ResourceStr[] = ['1', '2', '3', '4', '5', '6', '7']
  scroller: Scroller = new Scroller()

  scrollerBottom() {
    this.scroller.scrollEdge(Edge.Bottom)
  }

  build() {
    Column() {
      // initialIndex代表列表生成时,从第几个索引值开始展示,选择最后一个索引值,就实现了显示最底部的消息
      // scroller代表绑定滚动事件,配合list监听,实现发送和接收消息,都能滚动到最底部
      List({ initialIndex: this.list.length - 1, scroller: this.scroller }) {
        ForEach(this.list, (item: string) => {
          ListItem() {
            Text(item)
              .width("100%")
              .height("50vp")
              .textAlign(TextAlign.Center)
              .fontSize("15fp")
              .fontColor("#333333")
          }
        })
      }
      .cachedCount(5)
      .backgroundColor("#f5f5f5")
      .layoutWeight(1)
      .width('100%')

      Text("添加数据")
        .width("100%")
        .height("80vp")
        .backgroundColor("#eeeeee")
        .fontSize("18fp")
        .onClick(() => {
          this.list.push("100")
        })
    }
    .width("100%")
    .height("100%")
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 如何将page设置透明
193浏览 • 1回复 待解决
如何将背景颜色设置透明
2839浏览 • 1回复 待解决
如何将页面设置深色模式
2413浏览 • 1回复 待解决
如何将容器定位到屏幕的最底部
2550浏览 • 1回复 待解决
如何将har库迁移hsp库
1024浏览 • 1回复 待解决
HarmonyOS 页面如何将背景处理透明
52浏览 • 1回复 待解决
HarmonyOS 如何让Text底部对齐
23浏览 • 1回复 待解决
如何将List的回弹效果改为阴影效果
622浏览 • 1回复 待解决
js如何list组件设置横向的?
4125浏览 • 1回复 待解决
如何将Ability的UI界面设置成透明
2185浏览 • 1回复 待解决
HarmonyOS如何将Component转换PixelMap?
560浏览 • 1回复 待解决
如何将ArrayBuffer转成string
2695浏览 • 1回复 待解决
如何将ArrayBuffer转成string?
694浏览 • 1回复 待解决