Verwenden Sie im Vue-Projekt den Swiper, um die Seitenzahl des Karussells abzurufen

Anforderungsbeschreibung: Während der Entwicklung haben wir oft Karussellbilder auf der Seite, und manchmal müssen wir die Karussellbilder mit Daten verknüpfen, aber wie man die Karussellseiten erhält, gibt es einige Fallstricke

1. Zuerst müssen wir das Swiper-Plugin installieren

npm install vue-awesome-swiper --save-dev

2. Fügen Sie vor der Verwendung globale Referenzen zu main.js hinzu

VueAwesomeSwiper aus „vue-awesome-swiper“ importieren

importiere 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

3. Auf der Seite verwenden

 <swiper :options="swiperOption" ref="mySwiper3">
                        <swiper-slide>
                    <div class="biaoCharts" ref="biaoCharts"></div>
                        </swiper-slide>
                        <swiper-slide>
                            <div class=" biaoCharts" ref="biaoCharts2"></div>

                        </swiper-slide>
                        <!-- <div class="swiper-pagination" slot="pagination"></div>
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div> -->
                    </swiper>

 4. In Daten

 swiperOption: {
            loop: false,
            autoplay:false,
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swiper
            on: {
        
                slideChange: function () {
                    console.log(this.realIndex); // -> 这里的this指的是Swiper的this对象,不是vue的,所以要将VUe的this对象声明vm指向vue实例,这里就是轮播图的切换下标
                    vm.SwiperIndex=this.realIndex
                    console.log(vm.SwiperIndex);
                }

    },

             autoplay: {
             delay: 3000,
             stopOnLastSlide: false,
             disableOnInteraction: false,
             },
            // 显示分页
            pagination: {
               el: ".swiper-pagination",
               clickable: true, //允许分页点击跳转
             },
            // 设置点击箭头
            navigation: {
               nextEl: ".swiper-button-next",
               prevEl: ".swiper-button-prev",
             },
           },

5. Deklarieren Sie VM-Variablen global

<script>
 var vm = null
</script>

6. Deklarieren Sie in create, dass das Vue-Instanzobjekt auf vm zeigt

  created() {
          //完成swiperOption点击事件的vm指向vue实例
          vm = this;
    },

7. Abschließend modifizieren Sie den Stil entsprechend Ihren eigenen Bedürfnissen.