предисловие
Этот проект является предыдущим проектом приложения компании, собственным приложением для заказа еды в ресторане, которое было в автономном режиме.
Старик привык руками практиковаться в свободное время.Самая ранняя версия была html+jq, которую готовили для размещения в публичном слейв аккаунте.Потом реализовали с vue.Недавно штудировал небольшие программки.Из конечно, это также хорошая демонстрация для тренировки рук.
У Vue есть видеоруководство по проекту под названием Actual Combat Hungry. В нем рассказывается о привязке меню. В апплете идея та же, но детали разные.
Сначала о рендерах:
Здесь есть 2 функциональные точки:
- При нажатии на метку левой категории прокрутите до соответствующей точки привязки справа (в HTML вы действительно можете использовать точки привязки, что было сделано в то время)
- При прокрутке справа возьмите верх за точку, прокрутите до какой категории и активируйте соответствующую метку слева (эффект выделения).
Основная идея
Нажмите влево и вправо, чтобы прокрутить до соответствующей позиции
Поскольку у WeChat нет привязки, в списке продуктов справа используется нативный компонент scroll-view, и можно установить только его верхнюю часть прокрутки (позиция прокрутки, что означает то же, что и html).
Итак, вы, возможно, придумали способ.Слева несколько меток категорий и несколько товарных блоков справа.В примере 3 категории, и каждая категория имеет заголовок и несколько товарных контейнеров.Высота положения интервала (высота шапки + высота товарного контейнера * количество товаров), помещаем в массив, массив естественно начинается с 0, потому что начальная позиция прокрутки равна 0
Когда вы нажимаете на метку слева, вы получаете значение индекса, в соответствии со значением индекса, выводите массив высот интервалов и получаете значение, которое находится в верхней части списка продуктов.
При прокрутке справа активируется соответствующая вкладка слева
При прокрутке получить мгновенный scroll-top, занести его в массив высоты интервала, вычислить, где он находится, и вернуть соответствующее значение индекса, которое используется для определения номера метки левого меню, которую необходимо выделить.
Согласно приведенному выше скетчу, если предположить, что у нас есть три категории, в каждой из которых по 2 продукта, результирующий массив высот равен [0,200,400,600]
Предположим, когда мы прокручиваем, прокручиваем до позиции 298 пикселей, по массиву сравнения высот больше 200, не больше 400, должен возвращать индекс массива: 1
1 — это вторая позиция, вторая метка, которую следует активировать в левой части меню.
Связанный код
По результатам приведенного выше эскиза, в данном примере классификационная и товарная тара находятся на одном уровне, а товарная тара каждой классификации является самостоятельной тарой, и уже не упаковывается равномерно в одну тару
В событии onLoad загружаем данные о товарах и присваиваем данные о товарах товарам в данных
Обратите внимание: Метод расчета высоты товарного интервала нужно вызывать в коллбэке setData, потому что после setData отрисовка видео идет асинхронно, поэтому его надо вызывать в колбэке setData
Ниже приведен метод получения высоты каждой категории товара, а что касается кода получения контейнера представления, то он напрямую перемещается без объяснения причин.
Ниже приведен код просмотра левого меню.В соответствии с рассчитанным значением индекса, какая метка выделена
Привязать событие клика
Ниже показано, что при щелчке левой метки меню в соответствии со значением индекса метки, которая была нажата ранее, она переносится в массив высоты интервала, присваивается значению listViewScrollTop в данных и параметру scroll-top в контейнере прокрутки. привязан к этому значению, он будет прокручиваться до соответствующей высоты
Привязать событие прокрутки к контейнеру прокрутки продукта.При прокрутке вы можете получить текущую высоту прокрутки, сравнить, к какому диапазону принадлежит текущая высота в вычисленном массиве высот диапазона, вернуть соответствующее значение индекса и присвоить его cateListActiveIndex в данных
Используется для расчета, какая метка должна быть выделена слева
Резюме: Идея была объяснена выше, и обычно вставляется код
Прикрепите адрес проекта и потяните его, если он вам нужен:git ee.com/VB также поддерживает /names - я думаю...
Данные моделирования представляют собой локальное моделирование, фиктивный каталог в каталоге проекта, см. здесь:Создайте локальный фиктивный сервер данных для разработки апплета.