Поделитесь страницей со списком, которая реализует липкий эффект в апплете WeChat.

внешний интерфейс API Апплет WeChat Vue.js

Прежде всего, что такое липкий эффект?

Для получения подробной информации см. страницу со списком продуктов в приложении Ele.me (версия апплета не реализована)
Конкретный эффект и реализацию можете посмотреть в этой демо =>sticky demo on codepen
Проще говоря, заголовок будет иметь эффект прилипания: когда вы проведете пальцем вниз, он будет следовать за списком, а когда вы проведете вверх, он будет закреплен вверху.

Но если не учитывать совместимость (IOS6 и выше, Safari9.1+, chrome56+)
На самом деле, начиная с CSS3, для достижения этого эффекта существует атрибут position sticky.

{
    position: sticky;
    top: 0;
}

Однако для реализации требуются только эти две строки... Однако совместимость довольно плохая, так почему же совместимость простого в использовании свойства такая плохая?

Итак, каковы шаги страницы списка продуктов Ele.me в апплете?

  1. Используйте свойство scroll-into-view в представлении прокрутки для просмотра деталей.Мини-документация по программе
  2. Реализовать липкий эффект (см. демо-версию codepen)
  3. Получить scrollTop каждой прокрутки в представлении
  4. Отслеживание прокрутки прокрутки и изменение прокрутки в представлении

Давайте посмотрим, как реализовать

<scroll-view scroll-y class="left-wrapper" id="left">
  <view wx:for="..." bindtap="..."></view>
  <!--这里是左侧的类型选择-->
</scroll-view>
<scroll-view scroll-y
             class="right-wrapper"
             bindscroll="onScroll"
             scroll-into-view="{{toView}}"
             id="right">
  <view wx:for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}">
    <view class="type-title" style="{{style}}">
      <!-- 这个就是ticky header部分 -->
      {{item.title}}
    </view>
    <view class="content">
      <view wx:for="{{item.child}}" class="item">
        <!--这里是需要展示具体的列表项-->
      </view>
    </view>
  </view>
</scroll-view>

Страница списка слева ничего не говорит, не более чем нажатие определенного типа, присвоение предыдущего проверенного стиля, а затем изменениепросмотреть (ключ)ценность .
Итак, что такое View? Значение toView совпадает с представлением, к которому нужно перейти в представлении прокрутки.idСоответственно, то есть id в коде

<view wx:for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}">

Поэтому, когда соответствующая кнопка нажата слева, прокрутка справа перейдет к прокрутке в поле зрения соответствующего идентификатора,
На самом деле проблема липкого заголовка + переход реализована до сих пор.
но...
Если вы сдвинете полосу прокрутки вправо, как изменятся данные слева?
Если это не маленькая программа, многие люди должны знать, как это сделать, не болееОтслеживание полос прокрутки, определите положение полосы прокрутки, а затем измените выделение слева в соответствии с областью.
но...
Что, если апплет получает позицию прокрутки внутри представления прокрутки? ? ?
В апплете нет операции Dom, аналогичной document.getElementById().
Я не могу использовать $ JQuery, чтобы быстро получить scrollTop
Вы не можете напрямую манипулировать $el, как vue
К счастью, апплет открыл интерфейс в 1.4.wx.createSelectorQuery()

wx.createSelectorQuery()
Возвращает экземпляр объекта SelectorQuery. Вы можете выбрать узел с помощью SELECT и т. д., а также использоватьbonesingClientRect и другие методы для выбора информации, требующей запроса.

nodesRef.boundingClientRect([callback])
Добавлен запрос запроса положения макета узла относительно области отображения в пикселях. Его функция аналогична функции DOM getBoundingClientRect. Возвращаемое значение — это nodesRef, соответствующий selectorQuery.
В возвращаемой информации об узле положение каждого узла описывается полями слева, справа, сверху, снизу, шириной и высотой. Если предоставлена ​​функция обратного вызова, после выполнения метода exec selectQuery информация об узле будет возвращена в обратном вызове.
Затем вы можете получить все позиции прокрутки в представлении с помощью этого метода.

let query = wepy.createSelectorQuery()
for (let i = 0; i < this.types.length; ++i) {
  let id = this.types[i]
  query.select(`#${id}`).boundingClientRect((rect) => {
    this.scrollTops[id] = rect.top
  }).exec()
}

обращать внимание
Эту операцию нужно делать при onReady(), иначе свойство rect будет недоступно
После получения этого атрибута на самом деле очень легко работать, и вы можете перейти непосредственно к коду

onScroll (event) {
  // 如果是右侧的滚动view
  if (event.currentTarget.id === 'right') {
    // 判断滚动的方向
    let top = event.detail.scrollTop
    this.dir = this.currentTop < top ? 'down' : 'up'
    this.currentTop = top
    // 判断当前滚动条所在区域，如果不在当前区域则进行跳转
    if (top > this.scrollTops[this.getNextView()] &&
        this.dir === 'down' &&
        this.checked < this.types.length - 1) {
      this.setChecked(this.checked + 1)
    }
    if (top < this.scrollTops[this.toView] &&
        this.dir === 'up' &&
        this.checked > 0) {
      this.setChecked(this.checked - 1)
    }
  }
}

Затем реализована простая функция перехода на страницу со списком продуктов с эффектом прилипания.

яма

  1. scroll-view должен установить высоту, иначе переход прокрутки в представление не будет работать на IOS
  2. Использование createSelectorQuery должно выполняться после рендеринга страницы.

Существует проблема

  1. Прокрутка будет иметь инерционное движение. В это время нажатие кнопки слева для переключения прокрутки в поле зрения вызовет некоторые конфликты с событием onScroll. Тестирование IOS имеет эту проблему. Я надеюсь, что Бог может дать некоторые указания.

иллюстрировать

Из-за использования апплета, созданного wepy, некоторые коды будут отличаться от апплета (были внесены некоторые изменения), в основном из-за идеи.
Wepy потерял способgithub
Первоначальное намерение Wepy состояло в том, чтобы надеяться, что небольшие программы можно будет разрабатывать так же, как Vue. Поскольку я использую Vue для выполнения проектов, мне будет проще разрабатывать небольшие программы с помощью wepy. проблемы с дизайном.. проблемы, но, условно говоря, пользоваться им удобнее, чем непосредственно разрабатывать небольшие программы.

Разбитые мысли... Кто может научить меня изящно писать на Markdown?

Github: github.com/lyh2668
AuthBy: lyh2668

Категории