Техническая поломка
Недавно IKEA запустила мини-программу WeChat.
В этой статье мы разберем его функции и способы их реализации, если вы хотите создать что-то подобное.
Пользовательский заголовок
Обычно для мини-программы WeChat есть заголовок по умолчанию.
На главной странице IKEA мы видим этот логотип и прозрачные кнопки управления. Кстати, от кнопок управления справа не избавиться.
Чтобы удалить заголовок по умолчанию, добавьте его в app.json
В приложении IKEA не было настраиваемого заголовка для публикации на всех страницах. Они просто удалили заголовок по умолчанию. И вы видите только стили для домашней страницы.
Чтобы создать собственный заголовок навигации, вы можете выполнить следующее:
Закрепленная панель поиска
У них довольно плавный анимированный переход для панели поиска. Когда пользователь прокручивает страницу вниз, панель поиска остается наверху и сжимается, а логотип тускнеет, а фон меняет цвет.
Для этого вам нужно знать положение прокрутки, чтобы вы могли соответствующим образом изменить стили различных элементов.
Вот тут-то и пригодится onPageScroll.
В вашем файле javascript добавьте onPageScroll, он вернет объект события, имеющий scrollTop
scrollTop будет увеличивать прокрутку вниз.
Логика заключается в том, что всякий раз, когда пользователь прокручивает строку поиска, мы что-то делаем со стилями.
Поэтому нам сначала нужно будет узнать высоту строки поиска, вы также можете просто жестко закодировать число, но если строка поиска изменится в будущем, ваш код сломается.
В onLoad вы можете использовать createSelectorQuery() для получения элемента по классу и его высоте.
Наконец, в вашем onPageScroll вы напишете некоторую логику, чтобы определить, прошел ли пользователь прокрутку или нет.
Теперь у вас есть переменная passedHeader, которая переключается между истиной и ложью.
В вашем wxml добавьте passedHeader в скобках с двойными усами. Это позволяет WeChat интерпретировать javascript в wxml
А ? и : - это просто тернарные операторы javascript. Если вы не знаете о тернарном операторе, подробнее.
По сути, когда passedHeader истинно, мы добавляем класс с именем sticky к элементу
Итак, в вашем wxss вы будете .sticky к классам, которые хотите изменить, когда пользователь прокручивает страницу вверх.
Вот код для полного примера.
После того, как я написал о липкой панели поиска, я понял, что не могу вместить все функции мини-программ IKEA в одной статье.
Вот и другие наблюдаемые особенности:
- Вернуться к верхней кнопке
- Настраиваемые индикаторы карусели
- Перелистываемые вкладки
- Категориальная прокрутка товаров
- Аккордеонная анимация
- Плавающая кнопка действия
И самая интересная особенность, которую я обнаружил, - это их способность определять товары по картинке.
Очевидно, что не все это делается с помощью внешнего интерфейса. У них, вероятно, есть модель классификации изображений, обученная на изображении их продукта. А мини-программа только отправляет изображение на сервер, чтобы модель сделала прогноз.
Если это было полезно, посетите https://shanghaicoders.com/.
