实现容器高度自适应鸿蒙示例代码

List({ scroller: this.listScroller }) {
  ...
}
...
//获取高度宽度
.onAreaChange((_, n) => {
  if (!this.containerWidth) {
    this.containerWidth = Number(n.width)
    this.containerHeight = Number(n.height)
    this.containerMaxHeight = this.containerHeight
    // 最后一页高度即为最小高度 // 20-行间距 3-行数
    this.containerMinHeight =
      (this.containerHeight - 20) / 3 * this.lastPageLines + 10 * (this.lastPageLines - 1)
  }
})
//实现容器高度自适应
.onWillScroll((x)=>{
  this.updateContainerHeight(x)
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

updateContainerHeight(x: number) {
  let offsetX = this.listScroller.currentOffset().xOffset + x - this.containerWidth * (this.pageSize - 2)
  if (offsetX > 0) {
    let h = offsetX / this.containerWidth * (this.containerMaxHeight - this.containerMinHeight)
    // 根据横向偏移距离等比计算高度变化
    this.containerHeight = this.containerMaxHeight - h
  } else {
    this.containerHeight = this.containerMaxHeight
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.