HarmonyOS Next应用开发实战——汽车选车页面构建（part1）

HarmonyOS Next应用开发实战——汽车选车页面构建

文章概要

本文聚焦于HarmonyOS Next应用开发，详细阐述了一个汽车选车页面的构建过程。该页面具备多类型的信息展示和交互功能，涵盖了页签切换、城市选择、搜索、图标展示、品牌与车型展示等内容，同时还实现了滑动和点击的动画效果，为用户提供了流畅的选车体验。

核心功能介绍

1. 数据初始化与屏幕信息获取

在页面组件初始化时，会获取相关数据并获取屏幕的实例信息，为后续的布局和动画计算提供基础。

aboutToAppear(): void {
  this.iconArr = IconModel.getMainList();
  this.brandArr = brand.getBrandList();
  this.carArr = car.getCarList();
  this.listItemArr = brandListItem.getListItem();
  this.displayInfo = display.getDefaultDisplaySync(); //获取屏幕实例
}

2. 页签切换与动画效果

页面中实现了页签切换功能，并且带有下划线动画效果，用户点击页签或滑动页面时，下划线会跟随移动。

// 当前下划线动画
private getCurrentIndicatorInfo(index: number, event: SwiperAnimationEvent): Record<string, number> {
  let nextIndex = index;
  if (index > 0 && event.currentOffset > 0) {
    nextIndex--; // 左滑
  } else if (index < this.arr.length - 1 && event.currentOffset < 0) {
    nextIndex++; // 右滑
  }
  let indexInfo = this.getTextInfo(index);
  let nextIndexInfo = this.getTextInfo(nextIndex);
  this.swipeRatio = Math.abs(event.currentOffset / this.swiperWidth);
  let currentIndex = this.swipeRatio > 0.5 ? nextIndex : index; 
  let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * this.swipeRatio;
  let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * this.swipeRatio;
  this.indicatorIndex = currentIndex;
  return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth };
}

private underlineScrollAuto(duration: number, index: number): void {
  let indexInfo = this.getTextInfo(index);
  let positionXOther = (this.getCurrTextWidth(index) - this.indicatorWidth) / 2;
  this.startAnimateTo(duration, indexInfo.left + positionXOther);
}
```### HarmonyOS Next应用开发实战——汽车选车页面构建

#### 文章概要
本文聚焦于HarmonyOS Next应用开发，详细阐述了一个汽车选车页面的构建过程。该页面具备多类型的信息展示和交互功能，涵盖了页签切换、城市选择、搜索、图标展示、品牌与车型展示等内容，同时还实现了滑动和点击的动画效果，为用户提供了流畅的选车体验。

#### 核心功能介绍

##### 1. 数据初始化与屏幕信息获取
在页面组件初始化时，会获取相关数据并获取屏幕的实例信息，为后续的布局和动画计算提供基础。
```typescript
aboutToAppear(): void {
  this.iconArr = IconModel.getMainList();
  this.brandArr = brand.getBrandList();
  this.carArr = car.getCarList();
  this.listItemArr = brandListItem.getListItem();
  this.displayInfo = display.getDefaultDisplaySync(); //获取屏幕实例
}

2. 页签切换与动画效果

页面中实现了页签切换功能，并且带有下划线动画效果，用户点击页签或滑动页面时，下划线会跟随移动。

// 当前下划线动画
private getCurrentIndicatorInfo(index: number, event: SwiperAnimationEvent): Record<string, number> {
  let nextIndex = index;
  if (index > 0 && event.currentOffset > 0) {
    nextIndex--; // 左滑
  } else if (index < this.arr.length - 1 && event.currentOffset < 0) {
    nextIndex++; // 右滑
  }
  let indexInfo = this.getTextInfo(index);
  let nextIndexInfo = this.getTextInfo(nextIndex);
  this.swipeRatio = Math.abs(event.currentOffset / this.swiperWidth);
  let currentIndex = this.swipeRatio > 0.5 ? nextIndex : index; 
  let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * this.swipeRatio;
  let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * this.swipeRatio;
  this.indicatorIndex = currentIndex;
  return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth };
}

private underlineScrollAuto(duration: number, index: number): void {
  let indexInfo = this.getTextInfo(index);
  let positionXOther = (this.getCurrTextWidth(index) - this.indicatorWidth) / 2;
  this.startAnimateTo(duration, indexInfo.left + positionXOther);
}