小程序 WeChat: компонент «прилипание» + якорь

Опыт использования

Иллюстрация эффекта

Импорт компонента

Скопируйте папку components в свой каталог компонентов, а затем настройте компоненты в файле json страницы.

{
  "usingComponents": {
    "sticky": "/components/sticky/index",
    "sticky-item": "/components/sticky-item/index"
  }
}

Импортируйте компонент на страницу wxml.

  <sticky scrollTop="{{scrollTop}}" tabList="{{tabList}}">
      <sticky-item>
      </sticky-item>
  </sticky>

Основные свойства

1. tabList — данные для вкладок прилипания.

    tabs: [{
      title: 'Якорь 1'
    }, {
      title: 'Якорь 2'
    }],

2. scrollTop — расстояние прокрутки страницы. Пример использования:

  onPageScroll(e) {
    let scrollTop = e.scrollTop;
    this.setData({
      scrollTop
    })
  },

3. sync — переключатель включения отклика на изменение высоты асинхронного контейнера.

Примечание: sync и init должны использоваться вместе, иначе они не будут работать. Сценарии использования:

1. В sticky-item данные загружаются асинхронно.
2. Содержимое sticky-item должно отображаться или скрываться.

4. init — при необходимости пересчёта высоты содержимого sticky-item измените значение init на !init. Пример использования:

  <l-sticky sync init="{{updateSticky}}" scrollTop="{{scrollTop}}" tabList="{{tabGroups}}">
  </sticky>

  initSticky() {
    this.setData({
      updateSticky: !this.data.updateSticky
    })
  }

5. scrollTab — если вкладках слишком много элементов, можно использовать это свойство для активации функции прокрутки вкладок.

  <l-sticky scrollTab scrollTop="{{scrollTop}}" tabList="{{tabGroups}}">
  </sticky>