swiper(轮播图)基本使用

首先

Swiper使用方法 - Swiper中文网  

地址如上

在vue中安装

npm install --save swiper@5

使用多次的话,在入口文件main.js中引入,引入样式不需要from ‘swiper’

组件还是得引入

import Swiper from 'swiper'

列如

import 'swiper/css/swiper.css';

vue中使用的时候,从服务器拿数据时,由于v-for遍历时结构还没有完全同步,js(new swpier实例)代码不能直接写在mounted中

解决方案一

通过定时器解决

数组挂载完毕时用定时器延迟一秒

第二种完美地方式

用监视器跟nextTick组合

例如:此处用的dom写法,建议改成ref写法 当然不改也是一样的,

改为swiper(轮播图)基本使用_第1张图片

 

然后下面document改为swiper(轮播图)基本使用_第2张图片

一定注意,定义的时候是用ref但是用的时候是有个s的 

swiper(轮播图)基本使用_第3张图片

开始我在外面加上了handler,两种写法没什么区别但是加了我这里报错

handler:其值是一个回调函数。即监听到变化时应该执行的函数。

swiper(轮播图)基本使用_第4张图片

 说没有找到我这个bannerList的回调,我也不知道是什么问题,有大佬看见了可以告诉我大概是什么问题swiper(轮播图)基本使用_第5张图片

你可能感兴趣的:(经验分享)