HarmonyOS 开发-底部抽屉滑动效果案例

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    // 列表吸顶穿透界面