介绍
本示例介绍了利用List实现底部抽屉滑动效果场景,并将界面沉浸式(全屏)显示,及背景地图可拖动。
效果图预览
使用说明
- 向上滑动底部列表,支持根据滑动距离进行分阶抽屉式段滑动。
具体实现
- 本示例使用RelativeContainer和Stack布局,实现可滑动列表在页面在底部,且在列表滑动到页面顶部时,显示页面顶部标题栏。
- 通过对List设置onTouch属性,记录手指按下和离开屏幕纵坐标,判断手势是上/下滑。
- 根据手指滑动的长度对列表高度进行改变。
- 在手指滑动结束离开屏幕后,通过判断此时列表高度处于哪个区间,为列表赋予相应的高度。
工程目录
├──entry/src/main/ets // 代码区 │ ├──constants │ │ └──CommonConstants.ets // 公共常量 │ ├──entryability │ │ └──EntryAbility.ets │ ├──model │ │ └──CommonModel.ets // 公共实体类 │ ├──pages │ │ └──BottomDrawerSlideCase.ets // 首页 │ ├──utils │ │ ├──ArrayUtil.ets // 数组工具类 │ │ ├──GlobalContext.ets // 变量工具类 │ │ ├──Logger.ets // 日志文件 │ │ ├──SettingItem.ets // 图片实体类 │ │ └──WindowModel.ets // 窗口管理 │ └──view │ └──ComComponent.ets // 公用子组件 └──entry/src/main/resources // 应用资源目录
相关权限
不涉及。