HarmonyOS Next 底部抽屉滑动效果案例

2024-07-15 22:59| 来源: 网络整理| 查看: 265

介绍

本示例主要介绍了利用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

【本文地址】

公司简介

联系我们