vue中使用swiper5

官网使用方法详情：Swiper使用方法 - Swiper中文网在vue中使用首先 npm install --save swiper@5 // 安装5.xx版本的swiper1. 引入css js 文件由于在多个组件中使用所以直接在路口文件中引入css文件在需要使用轮播图的组件中引入js文件2.在需要使用轮播图的组件中生成dom 结构，可以直接去swiper官网复制3. watch监听数据

闪电松鼠~

3018人浏览 · 2022-02-24 12:17:07

闪电松鼠~ · 2022-02-24 12:17:07 发布

官网使用方法详情：Swiper使用方法 - Swiper中文网

在vue中使用首先 npm install --save swiper@5 // 安装5.xx版本的swiper

1. 引入css js 文件

由于在多个组件中使用所以直接在路口文件中引入css文件

在需要使用轮播图的组件中引入js文件

2.在需要使用轮播图的组件中生成dom 结构，可以直接去swiper官网复制

3. watch监听数据，确保swiper渲染时一定有数据

$nextTick 确保 new swiper时一定有dom结构

($nextTick 经常与操作dom的动作一块使用，$nextTick 可以确保dom已经生成)

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^