swiper（轮播图）基本使用

首先<!-- 引入 -->

<script type='text/javascript' src='../js/swiper.min.js'></script>

<link rel="stylesheet" href="../css/swiper.min.css">

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写法 当然不改也是一样的，

改为

 

然后下面document改为

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

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

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

 说没有找到我这个bannerList的回调，我也不知道是什么问题，有大佬看见了可以告诉我大概是什么问题