vue中swiper使用

1.引包

说明：导入相应js引css

import "Swiper" from "swiper"

import "swiper/css/swiper.css";

import "swiper/js/swiper";

 2.结构

说明：必要的结构使用；直接封装成一个组件 

3.new Swiper实例 

说明：(页面当中务必要有结构）；注释已经写入代码。

第一：可以解决获取数据在Swiper实例之前；第二：可以解决v-for遍历完后在Swiper之前。

import Swiper from "swiper";
export default {
  name: "Carousel",
  props: ["list"],
  // 这样做的目的是在list属性发生变化时，
  // 能够及时更新Swiper轮播组件，以保证轮播的内容和效果与list属性的变化保持同步。
  watch: {
    list: {
      immediate: true,
      handler(newValue, oldValue) {
        // 这里有了数据还是不行，v-for有没有渲染也是问题，不能保证结构是否完成。
        // 用于在DOM更新后执行回调函数。在Vue中，当对数据进行修改后，DOM并不会立即更新，而是在下一个"tick"时进行更新。
        // 这个"tick"是Vue内部的更新队列，在执行用户逻辑之前进行DOM更新。
        this.$nextTick(function () {
          const mySwiper = new Swiper(this.$refs.cur, {
            loop: true,
            slidesPerView: "auto",
            slidesPerGroupAuto: true,
            autoplay: true,
            //如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
              //如果需要前进后退按钮
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
            },
          });
        });
      },
    },
  },
};