swiper 简易轮播图实现

在微信小程序开发中，一切都只需调用写好的组件和API接口就可以了，特别方便。例如写一个轮播图效果：

1：在.js文件里的data字段里加入：　

　　data: {

　　　　imgUrl:["../../../images/hot10.png",

　　　　　　　　"../../../images/hot11.png",

　　　　　　　　"../../../images/hot6.png"

　　　　],   //加入三个图片地址（路径问题可以看我的另外一篇微信小程序文章：wx.navigateTo/wx.redirectTo无效  里面有介绍  ../ ./ 的介绍使用）

　　　　inter:2000,   //轮播跳转时间

　　　　autoplay:true  //是否自动轮播

　　}

　　

2：然后前端界面代码如下：（.wxml文件）

　　<swiper indicator-dots='true' indicator-color='white'indicator-active-color='red'

　　　　autoplay='{{autoplay}}'duration='2000'current='2'interval='{{inter}}'>

　　　　 <swiper-item wx:for="{{imgUrl}}">

　　　<image src='{{item}}' width="355" height="400"></image>

　　　　</swiper-item>

　　</swiper>

　　

　　swiper组件的参数具体可以去官网技术文档查看，下面截图查看：

 

　　

　　

wx:for="{{imgUrl}}" 这个是一个循环，用来循环三张图片标签

 

 效果如下图：

 

indicator-dots='true'   就是上图中的三个小圆点