1、微信小程序中，组件是比标签更为强大的功能部件。Swiper组件可能快速实现轮播图功能，组件结构为两部分，外层为swiper，内层为swiper-item。只要在swiper开始部分增加属性，就可以实现图片轮播功能。案例效果如下：
2、制过步骤如下：首先在微信开发者工具中建立一个页面，打开全局控制文件app.json，在pages中添加页面main.wxml的路径，自动会生成main的相关文件，代码如下：{"pages":["pages/main/main","pages/index/index","pages/logs/logs"]}其中，第一个main表示文件夹，第二个main表示main.wxml。"pages/main/main"放在前面，表示其在微信开发者工具模拟器上首先显示。代码输入保存后，形成的文件夹和文件如下图所示：
3、接着在根目录下建立images文件夹，在images文件夹下面建立post文件夹，在post文件夹中放入几张图片。效果如下图所示：
4、然后在main.wxml中，输入swiper组件代码，代码如下：<vie嘛术铹砾w><swiper indicator-dots=&#泌驾台佐39;true' indicator-color='#333' indicator-active-color='#f30' autoplay='true'><swiper-item><image src='/images/post/banner12.jpg'></image></swiper-item><swiper-item><image src='/images/post/banner13.jpg'></image></swiper-item><swiper-item><image src='/images/post/banner14.jpg'></image></swiper-item></swiper><text>风景展示</text></view>其中，indicator-dots属性表示是否显示面板指示点；indicator-color属性表示指示点颜色；indicator-active-color属性表示当前选中的指示点颜色；autoplay属性表示是否自动切换。图片采用了绝对路径，“/”表示根目录
5、与main.wxml配合的样式文件main.wxss的代码如下：swiper{border:solid 1px #ccc;width:100%;height:500rpx;}swiper image{width: 100%;height:500rpx;}至此，案例制作完成，可以在微信开发者工具的模拟器中看到案例效果了。