插件——swiper轮播(watch+nextTick结合使用)

swiper轮播

[swiper官网]

1、安装swiper5

npm install swiper@5

2、在需要使用轮播图的组件内导入swpier和它的css样式

//引入Swiper
import Swiper from 'swiper'
//引入Swiper样式
import 'swiper/css/swiper.css'

3、在组件中new Swiper实例之前，页面中必须要有dom标签
4、创建swiper实例

• 确保数据加载好了---watch，监听数据的变化
• 确保结构渲染出来了---nextTick，获取更新后的 DOM