Я потратил 6 часов на эту конкретную проблему, и я публикую это в Интернете, чтобы, когда вы погуглите, вам не пришлось проходить через то же самое.
На https://framework7.io/vue/swiper.html в документации рассказывается об элегантном компоненте Swiper. На самом деле он использует библиотеку Swiper под капотом.
Есть 3 примера, и нас с вами интересует последний:
<f7-block-title>With additional parameters</f7-block-title> <f7-swiper navigation :speed="500" :slidesPerView="3" :spaceBetween="20"> <f7-swiper-slide>Slide 1</f7-swiper-slide> <f7-swiper-slide>Slide 2</f7-swiper-slide> <f7-swiper-slide>Slide 3</f7-swiper-slide> <f7-swiper-slide>Slide 4</f7-swiper-slide> <f7-swiper-slide>Slide 5</f7-swiper-slide> <f7-swiper-slide>Slide 6</f7-swiper-slide> </f7-swiper>
А, слайдпервиев. Такой удобный параметр иметь.
Кроме того, это не сработает.
Решение?
Обратитесь к документации Framework7 v1, в которой рассказывается о другом способе передачи параметров. Страница https://v1.framework7.io/vue/swiper.html
Пример кода
<f7-swiper next-button prev-button :params="{speed:500, slidesPerView: 3, spaceBetween: 20}"> <f7-swiper-slide>Slide 1</f7-swiper-slide> <f7-swiper-slide>Slide 2</f7-swiper-slide> <f7-swiper-slide>Slide 3</f7-swiper-slide> </f7-swiper>
И это решение.
Если бы у меня была роскошь в будущем сказать мне ответ, я бы сэкономил себе 6 часов. Вместо этого мне пришлось проверить папки dist Framework7, чтобы найти упоминание «slidesPerView» (нет никаких упоминаний о том, что это общепринятая поддержка для компонента f7-swiper). Я пытался использовать библиотеку Swiper для Vue напрямую, но проект, над которым я работал, был исправлен на Vue v2, а Swiper Vue поддерживает только Vue v3. Я попытался использовать Swiper напрямую и сам внедрить JS, минуя Vue. Неа. Пробовал и другие библиотеки - безрезультатно. Решение состояло в том, чтобы посмотреть документацию устаревшей версии Framework7, несмотря на то, что в моем проекте использовалась последняя версия Framework7.