swiper模仿下滑无限轮播

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

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

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

代码块






注意缺陷,一定要看

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

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

  1. 只能在微信小程序端、H5页面运行,在客户端(安卓、IOS)十之八九是行不通

最后

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

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

你可能感兴趣的:(前端记录,vue2,swiper模仿抖音,微信小程序,demo实例)