微信小程序开发（六）————轮播图制作

在微信小程序上来实现轮播图的制作

编码之前需准备三张图片把它放在image目录里面，如图所示：

image目录

这些前期工作做完之后就可以开始进行编码,在post.wxml文件中添加如下代码，如图：

轮播图代码

 

微信小程序开发轮播图特别简单，就是调用swiper组件。swiper组件里面有三个swiper-item，这三个swiper-item是用来进行轮播的，在这三个swiper-item里面分别添加image标签，并给image标签的src属性写上图片对应的路径。效果如图：

第一张

此时图片宽度不够，需给最外层的swiper标签加个class，代码如图：

class属性

给swiper一个class属性，值为lunbo，然后去post.wxss里面编写样式，如图：

样式

首先lunbo的样式中width：100%，意思就是这个轮播组件的宽度为屏幕的宽度。下面的一句 .lunbo image的意思就是这个轮播组件里面的image标签，当然大家也可以给image加个class，方法很多，然后我们也给它一个width：100%，意思是图片的宽度等于轮播组件的宽度，那图片的宽度也是屏幕的宽度，效果如图：

效果图

此时图片的宽度和屏幕的宽度一样宽了。这样一来，我们的轮播图就大功告成了，仔细想想还是有点不妥，因为我们的轮播图只有我们自己用鼠标拖拽的时候才会轮播，我们能否让它自动轮播呢，当然可以，直接上代码：

post.wxml

我们在swiper里面又加了三个属性，第一个属性是indicator-dots，它的意思是在图片下方加上小圆点，大家可以看看别的网站的轮播图，图片下方都会有小圆点，用来显示这是第几张图片。第二个属性是autoplay，这个很明显就是图片自动播放了，它的值我们设置为true，第三个属性是interval，意思是图片自动切换的时间间隔，我给的值是4000，它的单位是毫秒，也就是每隔4秒图片就会切换一次。