swiper模仿下滑无限轮播

效果图，添加:vertical="true"属性便可往下无限滑

技术栈：vue2、uniapp、微信小程序

解决了什么：无限渲染dom节点只挂载三个dom元素

代码块

注意缺陷，一定要看

1. 由于swiper自身的问题，动态设置circular无限轮询属性时 :circular="false"，切换会丢失动画。这是swiper的一个缺陷，官方也知道但是一直没有修复。从1切换到2就能感受到，这是个用户体验的问题，参考网友踩坑记录https://developers.weixin.qq.com/community/develop/doc/000a2a8b4889484e31a61630653c00

2. 数据长度必须是3的倍数，如果数据不够手动添加，我们可以添加静态数据比如一张图片或者背景div

3. 只能在微信小程序端、H5页面运行，在客户端（安卓、IOS）十之八九是行不通

最后

在代码块里面都有些非常多注释，如果有疑惑，使用console.log挨个把变量值打印出来，应该马上就能理解。

这只是deom实例，swiper-item标签里面可以直接放video标签。demo主要解决问题是渲染dom元素，如果渲染所有数据，当数据达到100条左右就该头疼了。