vue-awesome-swiper 正确使用方式

最新推荐文章于 2024-05-24 17:24:45 发布

Howe_Hzc

最新推荐文章于 2024-05-24 17:24:45 发布

阅读量1.2k

点赞数

分类专栏： swiper 文章标签： vue

本文链接：https://blog.csdn.net/qq_39892395/article/details/123820058

版权

swiper 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装

//直接安装版本3即可
cnpm i vue-awesome-swiper@3 -S

页面引入

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

使用示例

<!-- 轮播 -->
  <div class="exhibit-swiper">
    <!-- v-if="swiperSlideNum > 1" 处理动态渲染数据loop: true失效问题 -->
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="i in swiperSlideNum" :key="i">
        <slot :name="'SWIPER_SLIDE_' + i"></slot>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>

配置options

  data() {
    return {
      swiperOption: {
        // loop: true,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        }
      },
    };
  },

添加监听左右切换事件回调

swiperSlideNum: {
      handler(n) {
        if (n > 1) {
          this.$nextTick(() => {
            /**
             * https://swiperjs.com/swiper-api#events swiper回调事件
             */
            let vm = this;
            this.swiper.on("slideNextTransitionStart", function () {
              vm.onSlideNext && vm.onSlideNext();
            });
            this.swiper.on("slidePrevTransitionStart", function () {
              vm.onSlidePrev && vm.onSlidePrev();
            });
          });
        }
      },
      immediate: true
    }

效果图：