代码拉取完成,页面将自动刷新
同步操作将从 HarmonyOS-Cases/Cases 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
本示例主要介绍了利用List实现底部抽屉滑动效果场景,并将界面沉浸式(全屏)显示,及背景地图可拖动。
使用说明
本例涉及的关键特性和实现方案如下:
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({ 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 // 列表吸顶穿透界面
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。