Applet основных возможностей - Пользовательский TabBar

Пользовательский TabBar

Библиотека инфраструктуры 2.5.0 начал поддерживать низкий вариант , чтобы быть совместимым с процессом .

Пользовательский TabBar позволяет разработчик большой гибкости в настройке стилей TabBar для удовлетворения более персонализированных сцен.

В пользовательском режиме TabBar

• Для того, чтобы обеспечить более низкую версию совместимы и какие страницы выделить закладку, элементы, связанные конфигурации TabBar, необходимые для выполнения договора, но эти поля не будут действовать на оказании пользовательского TabBar.
• В это время, разработчики должны предоставить пользовательский компонент для визуализации TabBar, все стиля TabBar по оказанию пользовательских компонентов. Рекомендуемая фиксируется в нижней части  крышки-View  +  Cover-изображения  компонентов стиля рендеринга , чтобы обеспечить уровень TabBar относительно высок.
• TabBar стиль , связанный с интерфейсом, такие как  wx.setTabBarItem  как провал.
• Примеры компонента TabBar пользовательских закладок, каждый отличается , может быть определены с помощью самосборки на  getTabBar интерфейсах , определенный TabBar экземпляр компонента получается из текущей страницы.

Примечание: Для достижения вкладки выберите состояние, на текущую страницу, с помощью  getTabBar приобретения экземпляра компонента, и вызова УстановитьДанных обновить выбранное состояние. Пример кода может снизу.

Использование процесса

1. Информация о конфигурации

• В  app.json тех  tabBar элементах , указанных  custom поле, в то время как остальная часть  tabBar конфигурации также завершить его.
• JSon все закладки в необходимости декларировать  usingComponents элементы могут быть  app.json открыты по всему миру.

Пример:

{
   " TabBar " : {
     " обычай " : правда ,
     " цвет " : " # 000000 " ,
     " selectedColor " : " # 000000 " ,
     " BackgroundColor " : " # 000000 " ,
     " список " : [{
       " pagePath " : " страница / компонент / индекс " ,
      « Текст » :" 组件" 
    }, { 
      " pagePath " : " страница / API / индекс " ,
       " Текст " : " 接口" 
    }] 
  }, 
  " usingComponents " : {} 
}

2. Добавьте код файлов TabBar

Добавьте файл ввода кода в корневом каталоге:

заказ вкладка-бар / index.js 
заказа цвет вкладка-бар / index.json 
заказа цвет вкладка-бар / index.wxml 
заказа цвет вкладка-бар / index.wxss

3. Наберитекод TabBar

Способ писать пользовательские компоненты, пользовательские компоненты , предоставляемые полностью взять на себя TabBar. Кроме того, новые пользовательские компонентные  getTabBar интерфейсы, доступные из определенного экземпляра компонента TabBar на текущей странице.

 

 

 

 

 

,