17-1，swiper组件

我们在小程序里实现顶部轮播图来动态的显示一些热门商品，这个时候就要用到swiper组件了。

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

如下图，就是我们传说中的顶部轮播图。

给大家看下官方swiper简介

可以看出我们的swiper必须结合swiper-item来使用。

17-2，swiper-item组件

我们的swiper-item就是用来装每个轮播图使用的。下面我写一个简单的例子来看下

我这里先在swiper里放三个swiper-item，给每个swiper-item设置不同的背景颜色。这个时候我们就可以实现这三个swiper-item的来回滑动切换。但是我们通常开发的时候，肯定不是仅仅显示一个颜色，我们应该在里面放置图片。要不然怎么叫轮播图呢。

17-3，swiper-item组件里显示轮播图

我们如果想在swiper-item里显示图片，就要借助我们前面学习的image组件了。如下图所示

这样我们就可以完整的实现一个轮播图组件了。我把完整的代码贴出来给到大家。

1234567891011

17-4,swiper的常用属性。

可以看出我们的swiper有很多属性，下面我会重点的把我们一些常用的属性，通过一个综合案例来给大家讲解下。

还是来看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

十八，页面跳转

我们在小程序里做页面跳转有两种方式

• 1，借助navigator组件
• 2，借助wx.自带方法，在点击的时候做页面跳转
  如下图所示的几个wx.方法