介绍
本示例主要介绍了利用List实现底部抽屉滑动效果场景,并将界面沉浸式(全屏)显示,及背景地图可拖动。
效果图预览
使用说明
- 向上滑动底部列表,支持根据滑动距离进行分阶抽屉式段滑动。
实现思路
本例涉及的关键特性和实现方案如下:
- 使用RelativeContainer和Stack布局,实现可滑动列表在页面在底部,且在列表滑动到页面顶部时,显示页面顶部标题栏。
Stack({ alignContent: Alignment.TopStart }) {
RelativeContainer() {
// Image地图
ImageMapView()
// 底部可变分阶段滑动列表
List({ scroller: this.listScroller }) {
...
}
.alignRules({
'bottom': { 'anchor': '__container__', 'align': VerticalAlign.Bottom },
'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },
'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },
})
}
StatusHead({
statusBarHeight: this.statusBarHeight,
topHeaderHeight: CommonConstants.PAGE_HEADER_HEIGHT,
isShow: this.isShow
})
}
- 通过对List设置onTouch属性,记录手指按下和离开屏幕纵坐标,判断手势是上/下滑。
List({ scroller: this.listScroller }) {
ListItemGroup({ header: this.itemHead("安全出行季") }){
...
}
}
.onTouch((event) => {
switch (event.type) {
// 手指按下触摸屏幕
case TouchType.Down: {
this.yStart = event.touches[0].y; // 手指按压屏幕的纵坐标
break;
}
// 手指在屏幕移动
case TouchType.Move: {
let yEnd = event.touches[0].y; // 手指离开屏幕的纵坐标
let height = Math.abs(Math.abs(yEnd) - Math.abs(this.yStart)); // 手指在屏幕上的滑动距离
let maxHeight = this.windowHeight - this.statusBarHeight; // list列表的最大高度
// 判断上滑,且list跟随手势滑动
if (yEnd < this.yStart) {
this.isUp = true;
...
}
else {
this.isUp = false;
...
}
}
}
})
- 根据手指滑动的长度对列表高度进行改变(以上滑为例)。
this.isScroll = false;
this.listHeight = temHeight;
- 在手指滑动结束离开屏幕后,通过判断此时列表高度处于哪个区间,为列表赋予相应的高度(以上滑为例)。
switch (event.type) {
case TouchType.Up: {
this.yStart = event.touches[0].y;
let maxHeight = this.windowHeight - this.statusBarHeight; // 设置list最大高度
// 列表上滑时,分阶段滑动
if (this.isUp) {
// 分阶段滑动,当list高度位于第一个item和第二个item之间时,滑动到第二个item
if (this.listHeight > CommonConstants.LIST_HEADER_HEIGHT + this.firstListItemHeight && this.listHeight <= CommonConstants.LIST_HEADER_HEIGHT + this.firstListItemHeight + this.bottomAvoidHeight + this.secondListItemHeight) {
this.listHeight = CommonConstants.LIST_HEADER_HEIGHT + this.firstListItemHeight + this.secondListItemHeight;
this.isShow = false;
return;
}
// 分阶段滑动,当list高度位于顶部和第二个item之间时,滑动到页面顶部
if (CommonConstants.LIST_HEADER_HEIGHT + this.firstListItemHeight + this.bottomAvoidHeight + this.secondListItemHeight < this.listHeight && this.listHeight <= maxHeight) {
this.listHeight = maxHeight;
this.isScroll = true;
this.isShow = true;
return;
}
// 分阶段滑动,当list高度大于最大高度,list滑动到页面顶部内容可滚动
if (this.listHeight >= maxHeight) {
this.isScroll = true;
this.isShow = true;
return;
}
}
else {
// 下滑阶段
...
}
break;
}
}
高性能知识点
不涉及
工程结构&模块类型
bottomdrawerslidecase // har类型
|---src/main/ets/constants
| |---CommonConstants // 常量
|---src/main/ets/components
| |---Component // 自定义组件
|---src/main/ets/utils
| |---ArrayUtil.ets // 数组控制
| |---dataSource.ets // 数据类型文件
| |---WindowModel.ets // 窗口管理器
|---src/main/ets/view
| |---BottomDrawerSlideCase.ets // 列表吸顶穿透界面
模块依赖
参考资料
鸿蒙全栈开发全新学习指南
也为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线【包含了大厂APP实战项目开发】。
本路线共分为四个阶段:
第一阶段:鸿蒙初中级开发必备技能
第二阶段:鸿蒙南北双向高工技能基础:gitee.com/MNxiaona/733GH
第三阶段:应用开发中高级就业技术
第四阶段:全网首发-工业级南向设备开发就业技术:https://gitee.com/MNxiaona/733GH
《鸿蒙 (Harmony OS)开发学习手册》(共计892页)
如何快速入门?
1.基本概念
2.构建第一个ArkTS应用
3.……
开发基础知识:gitee.com/MNxiaona/733GH
1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
基于ArkTS 开发
1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
鸿蒙开发面试真题(含参考答案):gitee.com/MNxiaona/733GH
鸿蒙入门教学视频:
美团APP实战开发教学:gitee.com/MNxiaona/733GH
写在最后
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
- 想要获取更多完整鸿蒙最新学习资源,请移步前往小编:
gitee.com/MNxiaona/733GH