小程序组件 —— 22 组件案例 - 轮播区域绘制

这一节我们实现轮播图最外层的盒子，也就是把轮播图的最外层搭好，先不给轮播图添加图片，因为图片属于新的组件，组件里面有一些知识点，需要单独分开讲；

回顾一下，在进行传统网页开发时，实现轮播图的时候，我们首先使用 html、css 实现轮播图的结构样式，然后使用 JS 控制轮播图的效果，或者直接使用插件实现轮播图的功能，而在小程序中实现小程序功能则相对简单很多；

在小程序中，如果想实现轮播图，只需要两个组件：swiper 和 swiper-item：

• swiper：滑块视图容器，可以简单理解为轮播图最外层的容器，是轮播图的盒子，swiper 中不能放置其它任何内容，只能放置 swiper-item 组件，如果放置了其它内容，内容是不会进行展示的；
• swiper-item：只可放置在 swiper 组件中，宽高自动设置为 100%，也就是占满 swiper 这个容器的宽和高，代表 swiper 中的每一项，也就是每一张轮播图；

下面打开微信开发者工具，实现轮播图最外层的结构：

• 切换到首页目录，打开 index.wxml 文件，在轮播图区域中实现轮播图的结构，在最外层写一个 swiper，swiper 是轮播图最外层的盒子，注意在 swiper 内部只能设置 swiper-item，在 swiper-item 中编写内容才能在页面上正常显示编写的内容；我们需要三张轮播图，所以需要三个 swiper-item，其代码如下：

  <view class="swiper"><swiper><swiper-item>1</swiper-item><swiper-item>2</swiper-item><swiper-item>3</swiper-item></swiper>
  </view>
  

  通过上面的代码就已经把轮播图的结构写好了，我们可以到模拟器中滑动界面观察轮播图的效果：

  

• 由于我们还没有编写 css 样式，所以目前轮播图的效果还不是很明显，下面我们来添加一些样式，我们打开 index.scss 文件，添加对应的样式代码如下：

  // 轮播图区域样式
  .swiper {swiper {height: 360rpx;background-color: skyblue;swiper-item{// & 在 Sass 中代表的是父选择器，引用的意思// swiper-item:first-child 表示取父选择器的第一个 swiper-item// swiper-item:last-child 表示取父选择器的最后一个 swiper-item&:first-child{background-color: lightsalmon;}&:last-child{background-color: lightseagreen;}}}
  }
  

  这里为了区分不同的 swiper-item，使用伪类选择器来设置不同 swiper-item 的背景颜色，具体效果如下：

  

• 目前轮播图是不能够自动播放的，需要通过手动进行滑动，如果想轮播图自己播放，需要给 swiper 添加一个 autoplay 属性 ，这个属性接收一个布尔值作为参数，我们设置为 true，即可实现自动播放效果：

  
  如果一个属性的值是布尔值，属性值可以不写，不写表示其值为 true，这样我们同样可以实现自动播放效果，如下：

• 设置了自动切换之后，可以继续设置切换间隔时长，我们可以在 swiper 中使用 interval 属性设置切换间隔，这里我们设置为间隔 1s 进行切换，如下：

• 设置自动切换、切换时长后，我们可以继续对轮播图添加其它属性，比如指示当前是第几场轮播图的选点功能，我们可以在 swiper 中添加一个 indicator-dots 属性，其属性值是布尔值，因此我们可以不填属性值，默认为 true，具体如下所示：

• 如果感觉选点不符合样式需求，可以根据实际情况进行修改，比如可以使用 indicator-color 属性修改选点的颜色，如下：

• 上面被激活的选点的颜色为黑色，如果我们觉得不好看，可以在 swiper 中使用 indicator-active-color 属性来调整激活后选点的颜色：

• 目前轮播图到第三张图片之后，会往前切换到第一张，当我们希望轮播图往后切换到第一张的时候，这个时候我们可以加另外一个 circular 属性，其属性值为布尔值，所以我们可以不写属性值，默认为 true，如下所示：

上面只讲了 swiper 中的一部分属性功能，具体更详细的功能，可以前往官方文档进行学习；

参考视频：尚硅谷微信小程序开发教程