微信小程序开发笔记：打造炫酷轮播图页面

从静态页面到动态交互，让我们的应用“动”起来

上一篇文章我们创建了欢迎页，今天来点更有趣的——制作一个带轮播图的文章阅读页。轮播图是移动应用中非常常见的功能，可以用来展示多条内容，提升页面的信息承载能力和视觉吸引力。

🎯 最终效果预览

今天要实现的是一个简洁的文章列表页顶部轮播图：

三张精美的轮播图片自动切换
带有指示点，让用户知道当前在第几页
5秒切换一次，节奏刚刚好
图片铺满整个屏幕宽度，视觉效果出众

🚀 一步一步来实现

第一步：创建页面文件

在 pages 目录下新建 post 目录，然后创建四个文件：

post.wxml - 页面结构
post.wxss - 页面样式
post.json - 页面配置
post.ts - 页面逻辑

注意： 我在创建时不小心把 post.wxss 写了两次，实际应该是 post.ts（如果是使用 TypeScript）或者 post.js（如果是使用 JavaScript）。大家在操作时要留心文件名哦！

第二步：获取素材资源

要实现轮播图，首先需要图片资源。这里使用课程提供的素材：

百度网盘链接：http://pan.baidu.com/s/1cxQXie
温馨提示： 链接中的 1cxQXie 是区分大小写的，输入时要注意大小写哦！

下载后将图片放入项目根目录的 /images/post/ 文件夹下。

第三步：编写页面结构（WXML）

打开 post.wxml，写入以下代码：

<!--pages/post/post.wxml-->
<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000">
      <swiper-item>
          <image src="/images/post/post-1@text.jpg"></image>
      </swiper-item>
      <swiper-item>
          <image src="/images/post/post-2@text.jpg"></image>
      </swiper-item>
      <swiper-item>
          <image src="/images/post/post-3@text.jpg"></image>
      </swiper-item>
  </swiper>
</view>

WXML知识点详解：

<swiper> 组件 - 微信小程序内置的滑块视图容器，专门用来实现轮播图
<swiper-item> - 每个轮播项，只能放在 swiper 组件内部
indicator-dots="true" - 显示面板指示点，就是那些小圆点
autoplay="true" - 自动切换，不需要用户手动滑动
interval="5000" - 切换间隔，5000毫秒=5秒

第四步：美化页面样式（WXSS）

打开 post.wxss，让轮播图变得好看：

/* pages/post/post.wxss */
swiper {
  width: 100%;
  height: 600rpx;
}

swiper image {
  width: 100%;
  height: 600rpx;
}

样式要点解析：

width: 100% - 让轮播图铺满整个屏幕宽度
height: 600rpx - 设置固定高度，600rpx在不同屏幕上会自动适配
swiper image - 这个选择器确保轮播图中的图片也能铺满整个轮播项

第五步：设置为启动页

修改 app.json，将 post 页面放在第一位：

{
  "pages": [
    "pages/post/post",
    "pages/welcome/welcome",
    // ... 其他页面
  ]
}

这样启动小程序时，就会直接显示我们刚刚制作的轮播图页面了。

📱 运行效果

编译运行后，你应该能看到：

页面顶部出现一个自动播放的轮播图
图片下方有3个小圆点，指示当前图片位置
每隔5秒，图片自动切换到下一张
用户也可以手动滑动切换

💡 知识点深度解析

1. Swiper组件的重要属性

属性	作用	示例
`indicator-dots`	是否显示指示点	`indicator-dots="true"`
`autoplay`	是否自动切换	`autoplay="true"`
`interval`	自动切换间隔	`interval="5000"`
`duration`	滑动动画时长	`duration="500"`
`circular`	是否循环衔接	`circular="true"`