微信小程序图片轮播功能简介，小程序轮播图在线制作

今天说的是小程序的一个小功能我赌五毛你之前一定看过类似的先来一张淘宝图：

在gif里一张张图片的切换就是今天要说的小功能啦在小程序里创建轮播图今天由于太忙的原因就不录demo图了（好吧其实我是懒...）看本程序媛是怎么弄出来的吧~

微信小程序提供了原生的轮播控件在微信的文档中叫做“滑块视图容器”只需要简单的配置就可以实现轮播的效果巧说seo论坛只需要简单的配置就可以实现轮播的效果非常的方便。在微信开发文档中我们可以看到这些属性：

然鹅在开发的过程中我发现还有一个属性 vertical 其值接受Boolean型变量默认值为false。当不设置 vertical 属性或者 vertical=”false” 时指示点在组件下部图片轮播从左至右效果如下：

当设置 vertical=”true” 时指示点在组件右部图片轮播就会变成从下至上就是这么任性~

我们需要注意的是： swiper是一个容器类视图但是其中只能放置组件如放置其他节点会被自动删除。

二、swiper-item

swiper-item的话就仅可放置在 swiper 组件中了宽高自动设置为100%。代表轮播中一帧的页面通常以循环的方式加载到页面中。

代码如下：

三、item单击事件

我们在 swiper-item 上绑定事件通过 data 自定义标签绑定数据。然后在function中通过event拿到。

注意：代码中的 data-id 和 data-name 均为自定义标签然后可以在绑定事件的event中通过 id 和 name 拿到。

最后一个注意点：在绑定的function中可以通过event拿到对应的数据。比如：e.currentTarget.dataset.id 对应wxml中的data-id

当然还有另一种办法。不需要绑定事件通过在每一个的 swiper-item 外面包上一个 a 标签以超链接的方式跳转页面也是可以完成的。

标签： 一个轮播页面组件