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

最新推荐文章于 2025-07-05 00:32:11 发布

原创最新推荐文章于 2025-07-05 00:32:11 发布 · 1.4k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

前端同时被 2 个专栏收录

63 篇文章

订阅专栏

微信小程序

58 篇文章

订阅专栏

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

回顾一下，在进行传统网页开发时，实现轮播图的时候，我们首先使用 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，这样我们同样可以实现自动播放效果，如下：