TabLayout

Специально разработанная для OpenHarmony библиотека TabLayout, надеемся, что вам понравится её использование

Примеры отображения

Установка

ohpm install @zyc/tablayout

Пример использования

TabLayout({
  tabs: this.tabsInfo,
  gapContinuousAnimation: false,
  smartToIndex: this.smartIndex,
  indicatorStyle: {
    warpTab: true,
    type: "line",
    colorGradient: {
      angle: 90,
      direction: GradientDirection.Left,
      colors: [["#ff9a9e", 0], ["#fad0c4", 1]],
    }
  },
})
  .width("100%")

Основные параметры| Параметр | Тип данных | Описание |

|------------------------|----------------------------------------------|------------------------| | tabStyle | ITabStyle | Стиль вкладки | | indicatorStyle | IIndicatorStyle | Стиль индикатора | | tabs | TabItem[] | Данные | | cacheCount | number | Количество кэшированных элементов | | isOverPage | boolean | Вкладка находится поверх страницы (эффект TikTok短视频) | | gapContinuousAnimation | boolean | Анимация при смене вкладки (отключена) | | showIndicator | boolean | Отображение индикатора | | smartToIndex | number | Автоматическое переключение индикатора | | onTabSelected | (position: number) => void | Callback при выборе вкладки | | onTabItemBuilder | (item: TabAttr) => void | Пользовательский компонент вкладки | | onTabIndicatorBuilder | () => void | Пользовательский компонент индикатора | | onContentBuilder | (item: TabItem, index: number) => void | Пользовательский компонент страницы | | | | |## Описание параметров стиля вкладки| Имя параметра | Тип параметра | Описание функции | |---------------------|---------------|--------------------------------------| | fontSizeNormal | number | Размер текста в неактивном состоянии | | fontSizeSelect | number | Размер текста в активном состоянии | | fontColorNormal | ResourceColor | Цвет текста в неактивном состоянии | | fontColorSelect | ResourceColor | Цвет текста в активном состоянии | | fontWeightNormal | FontWeight | Толщина текста в неактивном состоянии | | fontWeightSelect | FontWeight | Толщина текста в активном состоянии | | tabPadding | Padding | Расстояние между дочерними элементами Tab | | tabAlignment | Alignment | Расположение Tab на экране | | tabAverageEnable | boolean | Включение равномерного распределения контейнера Tab, должно использоваться вместе с tabContainerWidth | | tabContainerPadding | Padding | Padding контейнера Tab, рекомендуется использовать tabContainerMargin | | tabContainerMargin | Padding | Маржинальное пространство контейнера Tab | | tabContainerHeight | Length | Высота контейнера Tab | | tabContainerWidth | Length | Ширина контейнера Tab, по умолчанию auto |

| | | |## Описание параметров стиля Indicator| Параметр | Значение | Описание | |------------------|--------------------------------|--------------------------------------| | type | "line", "block", "custom" | Тип индикатора: линия, блок, кастомный (кастомный приводит к тому, что большинство свойств не работают) | | width | число | Ширина | | height | число | Высота | | animationType | "scroll", "alpha" | Тип анимации при смене | | alignment | Alignment | Относительно положения Tab | | radius | число | Радиус | | color | ResourceColor | Цвет | | colorGradient | ResourceColor | Градиент цвета | | warpTab | boolean | Адаптивная ширина Tab | | margin | Margin, Length | Не подчиняется warpTab | | padding | Margin, Length | Не подчиняется warpTab |

Знанные проблемы

Код в API12, вызов обратного вызова onChange у Swiper происходит очень поздно, что приводит к заметной задержке между индикатором и Tab. В API11 такой проблемы нет. Demo работает только в API12, для API11 требуется самостоятельно внести изменения.

Вклад в код

При использовании, если вы обнаружите любую проблему, вы можете создать Issue нам, конечно, мы также очень рады, если вы предложите PR.## Общение Конечно, вы также можете добавить меня в WeChat для общения, не забудьте указать источник～