vue中swiper使用

1.引包

说明：导入相应js引css

import "Swiper" from "swiper"

import "swiper/css/swiper.css";

import "swiper/js/swiper";

 2.结构

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

<template><div class="swiper-container" ref="cur"><div class="swiper-wrapper"><divclass="swiper-slide"v-for="carousel in list":key="carousel.id"><img :src="carousel.imgUrl" /></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>
</template>

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",},},});});},},},
};