Vue представляет новую версию swiper, vue-awesome-swiper заполняет пробел

Vue.js
Vue представляет новую версию swiper, vue-awesome-swiper заполняет пробел

О новой версии vue-awesome-swiper

вопрос

  • Почему мои точки разбивки на страницы компонента vue-awesome-swiper не показывают проблему?
  • Почему мой swiper не воспроизводится автоматически?
  • Почему у моего swiper нет css?

использовать

Представьтесь (предыдущие шаги, как обычно)

  1. npm install vue-awesome-swiper --save
  2. Ввести (глобально) в main,js:
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    Vue.use(VueAwesomeSwiper)
    import 'swiper/dist/css/swiper.css'(Возможно, проблема в том, что css не отображает)

  3. Представлено в компоненте:

    import 'swiper/dist/css/swiper.css'    //在全局没引入，这里记得要！
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

настроить

шаблон:

<swiper :options="swiperOption">
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>

сценарий:

export default {
    data() {
      return {
        swiperOption: {
          // 所有的参数同 swiper 官方 api 参数一样
          // 
        }
      }
    },
    ...
  }

Основное внимание уделяется изменениям в swiperOptionсм. разницу ниже:

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

До ошибки:

После исправления:

Суммировать

  1. На самом деле на официальном сайте vue-awesome-swiper инструкция уже была опубликована, но когда я увидел, что она вся на английском языке, я не захотел ее читать. Позже это было действительно очень легко читать и понимать, учиться на уроках и читать больше документов самостоятельно, вместо того, чтобы искать демо для копирования.
  2. По-прежнему меньше полагайтесь на плагины, некоторые плагины обновляются в любое время, и когда у вас есть возможность, сделайте их сами!

Только после 12 часов вечера я понял, что оригинальная версия Swiper различает компоненты и обычные версии, поэтому я не могу написать ее по оригинальному опыту. Я обнаружил, что в Интернете есть только две или три статьи о последнем vue-awesome-swiper, и это неясно. Поэтому я написал это, я надеюсь, что это поможет всем.

Категории