小程序中轮播页面的实现

在index.js中添加以下代码
Page({
data: {
motto: ‘Hello World’,
imgUrls: [
‘/images/swiper_01.jpg’, ‘/images/swiper_02.jpg’, ‘/images/swiper_03.jpg’, ‘/images/swiper_04.jpg’,
],
indicatorDots: true,
autoplay: true, // 轮播图自动播放
circular: true,
interval: 3000,
duration: 1000,
moves: [], // 当前热映相关数据
}
})
在index.wxml中添加

即可以实现 实现后的页面如图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190525202312725.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNDQ2NQ==,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190525202320331.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNDQ2NQ==,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190525202325567.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNDQ2NQ==,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190525202332161.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNDQ2NQ==,size_16,color_FFFFFF,t_70) 自动轮播

你可能感兴趣的:(微信小程序)