weapp tabbar

Компонент пользовательской панели вкладок апплета WeChat (TabBar)

Поддерживает значки без текста, большие значки, плавающие значки и т. д.

Загрузка исходного кода: https://github.com/tanggaowei/weapp-tabbar.

Код пользовательского компонента панели вкладок находится в каталоге /commpents/tabbar и может быть напрямую скопирован в другие проекты для использования. Ниже описано, как его использовать.

1. Эталонные компоненты

В json-файле страницы, на которой необходимо использовать панель вкладок, используйте элемент конфигурации usingComponents для ссылки на компонент панели вкладок:

 {
  "usingComponents": {
    "tabbar": "/components/tabbar/tabbar"
  }
}

2. Добавьте компоненты

Теперь добавьте компонент в файл wxml:

 <tabbar data="{{tabbar}}"></tabbar>

Затем определите данные компонента в файле js, например панель вкладок:

 Page({
  data: {
    tabbar: {
      "color": "#999999",
      "selectedColor": "#7788dd",
      "borderStyle": "#dcdcdc",
      "backgroundColor": "#ffffff",
      "list": [{
          "key": "home",
          "iconPath": "/images/icon_home.png",
          "selectedIconPath": "/images/icon_home_active.png",
          "text": "首页"
        },
        {
          "key": "tag",
          "iconPath": "/images/icon_tag.png",
          "selectedIconPath": "/images/icon_tag_active.png",
          "text": "标签"
        },
        {
          "key": "new",
          "iconPath": "/images/icon_plus_big.png",
          "iconType": "big overflow circle shadow",
          "choose": "disable"
        },
        {
          "key": "notebook",
          "iconPath": "/images/icon_notebook.png",
          "selectedIconPath": "/images/icon_notebook_active.png",
          "text": "日记本"
        },
        {
          "key": "me",
          "iconPath": "/images/icon_me.png",
          "selectedIconPath": "/images/icon_me_active.png",
          "text": "我"
        }
      ]
    }
  }
})

Формат данных компонента пользовательской панели вкладок такой же, как и исходная панель вкладок мини-программы. Здесь мы сосредоточимся на использовании новых атрибутов iconType и choose .

iconType имеет всего 4 значения: big , overflow , circle и shadow . Эти четыре значения можно использовать по отдельности или одновременно. При одновременном использовании разделяйте их пробелами (фактически он будет заполнен в атрибуте class соответствующего тега). Их функции заключаются в следующем:

• big использует большие значки и устанавливает ширину и высоту значка равными 95 пикселей, что соответствует высоте панели вкладок;
• переполнение перемещает значок вверх, так что часть его отображается за пределами панели вкладок;
• Круг разрезает изображение иконки на круг;
• Тень добавляет тень к значку.

Атрибут Choose имеет два значения: Enable и Disable; значение по умолчанию — Enable. Если для него установлено значение «отключить», щелчок по элементу метки не изменит выбранное состояние панели метки, но событие изменения все равно будет запущено.

3. Мониторинг событий переключения

Используйте bindchange для привязки события прослушивания:

 <tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

Затем реализуйте метод прослушивания в Page():

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    } else {
      this.setData({
        choose_index: e.detail.index
      })
    }
  }

Метод прослушивания получит два данных: e.detail.key и e.detail.index . Среди них e.detail.key соответствует ключевому значению элемента массива данных tabbar.list, что не так хорошо, как приведенные выше «домой», «тег», «новый», «блокнот» и «я». e.detail.index соответствует порядковому номеру элемента массива, например 0, 1, 2, 3, 4.

4. Практический план

1) Пользовательские компоненты

Пользовательские компоненты похожи на страницы и имеют собственные шаблоны wxml и стили wxss, что облегчает разделение логики и представлений, что лучше, чем непосредственное использование шаблонов. Вот пример кода для переключения с использованием пользовательского компонента в index.wxml:

 <home wx:if="{{choose_index==0}}"></home>
<tag wx:if="{{choose_index==1}}"></tag>
<notebook wx:if="{{choose_index==3}}"></notebook>
<me wx:if="{{choose_index==4}}"></me>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

Среди них <home> , <tag> , <notebook> и <me> — это четыре пользовательских компонента, которые реализуют свои собственные функции соответственно.

2) Используйте шаблоны

Эффект переключения также может быть достигнут с помощью шаблонов, но код логики может потребоваться написать на той же странице. Например:

 <import src='/template/home/home.wxml' />
<import src='/template/tag/tag.wxml' />
<import src='/template/notebook/notebook.wxml' />
<import src='/template/me/me.wxml' />

<template is="home" wx:if="{{choose_index==0}}"></template>
<template is="tag" wx:if="{{choose_index==1}}"></template>
<template is="notebook" wx:if="{{choose_index==3}}"></template>
<template is="me" wx:if="{{choose_index==4}}"></template>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

3) Навигация и прыжок

Вы можете использовать интерфейс wx.navigateTo() или wx.redirectTo() в методе прослушивания для переключения содержимого страницы. Например:

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    }
  }