swiper的基本使用

来源：http://www.tudoupe.com时间：2022-02-25

1.引入响应的jS|CSS包

2.页面中的结构务必要有

3.new Swiper实例【轮播图中添加动态效果】

---ListContainer组件开发的重点

1.安装swiper插件：@5

npm install --save swiper@5

2.引入包和样式

import Swiper from "swiper";

import "swiper/css/swiper.css";

3.页面结构

<div

class="swiper-slide"

v-for="(carousel, index) in bannerList"

:key="carousel.id"

>

4.实例化（在mounted）中给轮播图添加动态效果

watch：数据监听，监听已有数据的变化,但不能保证数据执行完毕

nextTick: 在下一次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM

可以保证页面中的结构一定是有的，经常和一些插件一起使用

watch+nextTick:

2023-05-06 微pe怎么初始化U盘(微pe怎么恢复初	2023-05-06 Xp系统boot 进入pe(boot manager 怎么进入
2023-05-06 win pe修复bcdboot(pe修复系统)	2023-05-06 win7更新失败 pe(win7更新失败还原更
2023-05-06 u盘装了pe读取不了(u盘能进pe读取不	2023-05-06 u盘pe 发热(u盘发热烫手)
2023-05-06 u盘pe下看不到硬盘(u盘启动pe看不到	2023-05-06 pe盘 ntfs(u盘ntfs格式)
2023-05-06 sony笔记本进入pe模式(联想笔记本怎	2023-05-06 pe启动盘进不去(pe启动盘进不去系统