轮播
swiper提供了
list
快捷设置和swiper-item
子组件方便定义。
Props
参数
说明
类型
默认值
list
列表数据
Array
无
direction
方向
String
horizontal
show-dots
是否显示indicator,只在list快捷形式下显示
Boolean
true
show-desc-mask
是否显示描述梦曾
Boolean
true
dots-position
indicator位置
String
right
dots-class
indicator的附加样式类
String
无
auto
是否自动播放
Boolean
false
loop
是否循环播放
Boolean
无
aspect-ratio
纵横比,设置则自动根据宽度计算高度
Number
无
min-moving-distance
最小滑动距离
Number
0
index
指定显示item的
Number
0
interval
轮播时间间隔
Number
3000
threshold
滑动距离阀值,当按住屏幕滑动超过此距离,松开手时,自动滑,否则不滑动
Number
50
duration
滑屏动画时间,单位ms,数值越小,滑动越快
Number
300
height
容器高度
String
auto
示例
基本使用
``` vux height=200 components=Swiper
export default { data: function () { return { list: [{ url: '<a href="http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400385458&ampidx=1&ampsn=78f6b8d99715384bdcc7746596d88359&ampscene=19#wechat_redirect">http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&mid=400385458&idx=1&sn=78f6b8d99715384bdcc7746596d88359&scene=19#wechat_redirect</a>', img: '<a href="http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg">http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg</a>', title: '如何手制一份秋意的茶?' }, { url: '<a href="http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400160890&ampidx=1&ampsn=29ef02af25793a11a3f6aec92bfb46c1&ampscene=19#wechat_redirect">http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&mid=400160890&idx=1&sn=29ef02af25793a11a3f6aec92bfb46c1&scene=19#wechat_redirect</a>', img: '<a href="http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg">http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg</a>', title: '茶包VS原叶茶' }, { url: '<a href="http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400094682&ampidx=1&ampsn=8231a2053b772b2108784fccc254d28c&ampscene=19#wechat_redirect">http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&mid=400094682&idx=1&sn=8231a2053b772b2108784fccc254d28c&scene=19#wechat_redirect</a>', img: '<a href="http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg">http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg</a>', title: '播下茶籽,明春可发芽?' }] } } }
```
Last updated