swiper组件

swiper是用于创建滑动视图的组件,它只能包含swiper-item子组件。文章介绍了如何设置轮播图指示点、自动轮播(默认间隔5秒)、衔接滑动和滑动动画时长(默认500ms)。此外,还展示了如何通过改变current属性或使用item-id来切换显示的swiper-item内容。
摘要由CSDN通过智能技术生成

swiper组件是滑块视图容器其中只可放置swiper-item组件,否则会导致未定义的行为。

swiper | 微信开放文档

使用示例:

新建test页面作为启动页

 

 在test页面中

效果如下图

设置轮播图指示点

 效果如下:

设置自动轮播

autoplay设置为true即可自动播放轮播图,如果没有指定时间间隔,那么自动切换间隔时间默认为5秒

interval属性可以设置自动切换时间

设置衔接滑动

现在轮播图切换到最后一张时,回到第一张可见并不是衔接的

如果要设置衔接滑动,设置circular属性为true即可

设置滑动动画时长

duration属性可以设置滑动的动画时长,默认为500ms

 上图中红框代码设置了滑动的动画时长为1秒

切换显示哪一项swiper-item

通过改变swiper的current属性的值

 使用item-id

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值