1 Star 1 Fork 0

ScenarioSamples/AutoHeightList

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

List横向滑动容器高度自适应

介绍

该示例实现了List横向滑动容器高度自适应,通过List模拟美团首页菜单横向滚动高度自适应效果。

效果预览

图片名称

约束与限制

本示例仅支持标准系统上运行,支持设备:华为手机或运行在DevEco Studio上的华为手机设备模拟器。

使用说明

安装到手机后不会在桌面生成桌面图标,点击卡片即可进入本应用。

实现思路

  • 在list组件区域变化时获取宽度和高度
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)
})
  • 通过updateContainerHeight方法计算高度变化,实现横向滚动高度自适应效果。
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
  }
}

一份简单的问卷反馈

亲爱的Harmony Next开发者,您好!
为了协助您高效开发,提高鸿蒙场景化示例的质量,希望您在浏览或使用后抽空填写一份简单的问卷,我们将会收集您的宝贵意见进行优化

点击此处填写问卷

空文件

简介

【鸿蒙 Harmony Next 示例 代码】通过List模拟美团首页菜单横向滚动高度自适应效果 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/scenario-samples/auto-height-list.git
git@gitee.com:scenario-samples/auto-height-list.git
scenario-samples
auto-height-list
AutoHeightList
master

搜索帮助