Vue プロジェクトでスワイパーを使用してカルーセルのページ番号を取得します

要件の説明: 開発中にページにカルーセル画像が含まれることがよくあり、カルーセル画像をデータにリンクする必要がある場合がありますが、カルーセル ページを取得する方法にはいくつかの落とし穴があります。

1. まず、スワイパープラグインをインストールする必要があります

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

2. 使用前に main.js にグローバル参照を追加します

「vue-awesome-swiper」から VueAwesomeSwiper をインポートします

'swiper/dist/css/swiper.css' をインポートします

Vue.use(VueAwesomeSwiper )

3. ページ内での使用

 <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. データ内

 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. vm 変数をグローバルに宣言する

<script>
 var vm = null
</script>

6. create で、vue インスタンス オブジェクトが vm を指すことを宣言します。

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

7. 最後に、必要に応じてスタイルを変更します。