Как сделать универсальный scrollspy?

Question

[wiyod]

С удивлением столкнулся с фактом, что фактически нету ниодного ванильного или Вью-плагина scrollspy, который бы нормально работал (да и тех что кривоватые 2-3 штуки). Все остальные - на jQuery. Поэтому захотелось реализовать самому. Сделал элементарный набросок для одного элемента и тут я понял, что не так все просто.

Как сделать из этого универсальный инструмент? Как присваивать data properties для всех объектов (к которым я привяжу назначение стилей), как назначать отдельный обработчик для каждого элемента который нужно отслеживать и тд и тп. В идеале надо где-то в одном месте перечислить элементы-блоки, или назначить им общий класс, и потом изменяя data properties присваивать классы соответсвующим ссылкам, которые ссылаются на эти элементы.

Весь нужный функционал реализован здесь, но только для одного элемента Second - https://codepen.io/kodej/pen/MEzNwm

Прошу помощи, как реализовывать подобную логику?

Answer 1

[0xD34F]

Ну, наверное, в data должен быть массив объектов, описывающих блоки. Вместо логического значения активности следует работать с номером активного блока. А чтобы вручную не писать разметку каждого блока, использовать v-for. Как-то так.

Comments

[wiyod]

Спасибо конечно, но в реальной жизни ни о каких v-for не может идти и речи естественно

[wiyod]

Как это теперь переписать по человечески? Зачем мне 3 одинаковых блока из v-for? В кажом будет уникальная разметка.

[0xD34F]

А почему вы решили, что с помощью v-for нельзя сделать разную разметку в разных блоках? Можно. Например, каждый блок может быть отдельным компонентом. Типа так.

[wiyod]

0xD34F, вы мне вообще решили мозг сломать, ха-ха)) Это интересно, возможно и попробую какждый блок выносить в отдельный файл. Может быть удобно для маленьких сайтов. Но если вернутся к теме, почему это не работает

<li><a :href="'#' + blocks[0].name" :class="{ 'active': blocks[0] === active }">{{blocks[0].name}}</a></li>

Как мне переписать этот луп если нету доступа к i?

[wiyod]

Вообще конечно все это не реюзабельное. Хотелось универсальное решение. Которое - хлоп и можно заюзать в любом проекте на любом этапе. А тут вы предлагаете мне вообще подход к верстке изменить ради того чтобы юзать scrollspy)))

[wiyod]

При этом, я не говорю что этот подход плох. Просто это слишком неожиданно для меня. Тема с выносом блоков в компоненты - любопытна.

[wiyod]

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

[0xD34F]

Вы страшные вещи говорите. "Не реюзабельное" - это как раз когда вы руками вписываете три, четыре, пять, сорок пять блоков.

Как мне переписать этот луп если нету доступа к i?

Как это нету? Непонятно. Ну да ладно - можно хранить в объекте каждого блока его активность. Типа так.

Или вы хотите вообще от v-for отказаться, чтобы было как в вашем исходном примере? Тогда как-то так. Дичь какая-то.

[wiyod]

Остановился на таком варианте - https://codepen.io/kodej/pen/PJXwqY
Спасибо за помощь!

[wiyod]

Думаете все же v-for удобно? Да как это в голове деражть все? Намешано в кучу - данные, стили, названия, состояния...Не знаю даже. Что тут удобного. Место названий классов - в верстке, а не в data

[wiyod]

Вооооот, я МГНОВЕННО нашел пример почему это соверщенно не реюзабельное решение! Только сел сразу попандос!

У меня меню навигации В ОТДЕЛЬНОМ КОМПОНЕНТЕ Header.vue! А вы предлагаете v-for. У меня меню в одном компоненте, сами блоки в другом. А у вас все в одном месте в куче в data!

[0xD34F]

Ну и что что отдельный компонент? Не надо зашивать данные блоков в data, вместо этого следует сделать их параметром. Тогда можно будет использовать в разных компонентах один и тот же объект.

Или vuex использовать. В общем, варианты есть.