小程序中swiper组件实现图片轮播切换功能的示例

小编给大家分享一下小程序中swiper组件实现图片轮播切换功能的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

专注于为中小企业提供成都网站设计、成都网站制作、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业环县免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

1、效果展示

小程序中swiper组件实现图片轮播切换功能的示例

2、关键代码

index.wxml:


 
 
 
 
 
 
 
 
 

swiper组件属性说明如下:

属性名类型默认值说明最低版本
indicator-dotsBooleanfalse是否显示面板指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorColor#000000当前选中的指示点颜色1.1.0
autoplayBooleanfalse是否自动切换
currentNumber0当前所在页面的 index
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长
circularBooleanfalse是否采用衔接滑动
verticalBooleanfalse滑动方向是否为纵向
bindchangeEventHandle
current 改变时会触发 change 事件,event.detail = {current: current, source: source}

以上是“小程序中swiper组件实现图片轮播切换功能的示例”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站标题:小程序中swiper组件实现图片轮播切换功能的示例
文章URL:http://pwwzsj.com/article/gogcci.html