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

Swiper是滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。是目前应用较广泛的移动端网页触摸内容滑动插件。

WXML部分:

 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" indicator-color='#fff' indicator-active-color='#999'  duration="{{duration}}" class='ibanner'>
  <swiper-item wx:for="{{imgUrls}}">
    <navigator url='{{item.link}}' open-type='switchTab'>
     <image src="{{item.url}}" class="slide-image" mode="widthFix" />
    </navigator>
  </swiper-item>
 </swiper>

这里说明一下，我在做的时候开始没有添加 open-type 属性 导致后面点击没有任何反应，后面也是查询了好一会，我是个不太爱看手册的人 ，~囧~，后面加上就可以了：

open-type有几个参数：

1. switchTab: 切换tab，基本和下面的底部导航功能一样，链接地址需要在app.json的pages里面注册。
2. redirect: 在当前页面打开，设置这个参数的时候链接后面可以带参数。
3. navigate: 这个参数基本是和target="miniProgram" 配合使用的， 后面跟上app-id='' 打开绑定的另外的小程序。

JS部分：

Page({
  data: {
    imgUrls: [
      {
        link:'../me/me',
        url: 'http://twbweb.com/xcx/images/banner.jpg',
      },
      {
        link: '../cart/cart',
        url: 'http://twbweb.com/xcx/images/banner.jpg',
      },
      {
        link: '../cate/cate',
        url: 'http://twbweb.com/xcx/images/banner.jpg',
      }
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  }
})

介绍一下参数的意思：

indicator-dots ：Boolean false 是否显示面板指示点

autoplay： Boolean false 是否自动切换

interval ： Number 5000 自动切换时间间隔

 

duration ： Number 500 滑动动画时长

最后加一点css 样式：

.ibanner { height: 475rpx;}
.slide-image {width: 100%;}

好了 ，到这里就结束了，基本上图片点击的话就可以切换到其他页面的，我也看到有很多朋友用的是同事 绑定点击事件，然后通过索引的方法来打开相应的链接，也是可以的，不过我觉得略麻烦了一点。