微信小程序实例：轮播图的代码实现与分析

本文来说说轮播图，最常见的一个轮播图，中间带小圆点，自动轮播。

第一步：WXML文件：

<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  <block wx:for="{{imgUrls}}" wx:key="unique">   <swiper-item>    <image src="{{item}}" class="slide-image"/>   </swiper-item>  </block> </swiper>

第二步：js文件：

Page({   data: {     imgUrls: [       'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',       'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',       'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'     ],     indicatorDots: true,     autoplay: true,     interval: 3000,     duration: 500,     }, })

介绍一下参数的意思：

   indicatorDots: true,     autoplay: true,     interval: 3000,     duration: 500,

indicator-dots Boolean false 是否显示面板指示点autoplay Boolean false 是否自动切换interval Number 5000 自动切换时间间隔duration Number 500 滑动动画时长

微信小程序轮播图功能开发实例

微信小程序的轮播图swiper问题

以上就是微信小程序实例：轮播图的代码实现与分析的详细内容，更多内容请关注技术你好其它相关文章！