6.2.2 swiper滑块视图容器-常用组件- 常用语法【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

6.2.2 swiper滑块视图容器

滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图，注意是滑动切换而不是滚动。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。
属性说明



change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：
 autoplay 自动播放导致swiper变化。
 touch 用户划动引起swiper变化。
 其他原因将用空字符串表示。
swiper做左右拖动的长列表问题
 swiper是单页组件，适合做banner图轮播和简单列表左右滑动。
 因为性能问题，用swiper做复杂长列表，需要较高的优化技巧以及接受一些限制。
注意事项
 使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height。
 注意：其中只可放置 组件，否则会导致未定义的行为。
 如果遇到current、current-item-id属性设置不生效的问题参考：组件属性设置不生效解决办法
 banner图的切换效果和指示器的样式，有多种风格可自定义，可在uni-app插件市场搜索
 swiper在App的vue中、百度支付宝头条QQ小程序中，不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。
 同时监听 change transition，开始滑动时触发transition, 放开手后，在ios平台触发顺序为 transition… change，Android/微信小程序/支付宝为 transition… change transition…

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战
https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战
https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码
https://ke.qq.com/course/3064977

（4）小白教程资料 http://www.2d5.net

（5）毕业设计网http://www.pc-365.net
（6）小程序编程网www.4317.org

（7）计算机编程网http://www.05423.com/