swiper 是个幻灯片或者叫旋转木马组件 .. 在小程序的页面上添加一个幻灯片，可以先用一组 swiper .. 幻灯片里的每个项目单独用一个 swiper-item 组件 ..

它里面包装的就是可以循环显示的幻灯片项目 .. 这里先用一个 image 组件，在项目里添加一个图片 .. 上面加上 src 属性，指定一下图片的位置 ..

在 ninghao-images 这个仓库里面有几张图片 .. 可以用一下 .. 复制图片的地址 .. 粘贴到 src 属性里面 ..

然后再复制两个项目 .. 修改一下项目里的图像的地址 ... 复制 ... 粘贴 .. 每个项目都让它使用不同的图像 ..

打开页面的样式文件 .. 可以设置一下 image 组件的样式 .. 把它的 width 设置成 100% ..

现在页面上就会显示一个幻灯片 .. 可以左右滑动 .. 显示幻灯片里的不同的项目 ..

swiper 组件有些属性可以配置幻灯片的显示还有行为 .. 比如先添加一个 indicator-dots .. 让它等于 true .. 这样会在幻灯片上显示一组指示点 ..

indicator-color 可以设置一下这个指示点的正常状态的颜色 ... 可以用 rgba 表示 .. 颜色是白色 .. 不透明度是 0.3 ..

indicator-active-color .. 设置的是激活状态下的指示点的颜色 .. 这里把它设置成白色 ..

指示点可以提示用户幻灯片里面有几个项目 .. 当前显示的是哪一个 ..

这个 swiper-item 可以用一个wx:for 循环来显示 .. 我们先在页面的主逻辑的初始化数据里面，添加一组数据 .. 这个组数据就是幻灯片里的项目要用的一些东西 .. 比如添加一个 images .. 它里面就是一些图像的地址 ..

然后回到页面的视图文件 .. 可以用一个 block .. 它可以包装一块视图 .. 这个 block 并不是一个实际的组件 .. 因为这里我们不需要使用一个多余的组件 ..

在它上面添加一个 wx:for .. 循环的一组数据是页面里的 images .. 里面包装一个幻灯片项目 .. image 的 src 属性的值可以使用 item 表示 ..

这个 block 里的东西，有点像是幻灯片项目的一个模板 ..

保存一下 ..

页面上仍然会显示之前的幻灯片 ..