如何使用 swiper 实现轮播图？

推荐答案

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="index">
    <swiper-item>
      <image src="{{item}}" mode="aspectFill"></image>
    </swiper-item>
  </block>
</swiper>

// www.javascriptcn.com code example
Page({
  data: {
    imgUrls: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  }
});

本题详细解读

1. swiper 组件的基本使用

swiper 是微信小程序中用于实现轮播图的组件。它包含多个 swiper-item，每个 swiper-item 代表一个轮播项。通过设置 swiper 的属性，可以控制轮播图的行为。

2. swiper 组件的常用属性

• indicator-dots: 是否显示面板指示点，默认为 false。
• autoplay: 是否自动切换，默认为 false。
• interval: 自动切换时间间隔，单位为毫秒，默认为 5000。
• duration: 滑动动画时长，单位为毫秒，默认为 500。

3. swiper-item 的使用

每个 swiper-item 代表一个轮播项，通常在其中放置图片或其他内容。通过 wx:for 循环渲染多个 swiper-item，可以实现动态轮播图。

4. 数据绑定

在 Page 的 data 中定义轮播图的数据源 imgUrls，并通过 wx:for 绑定到 swiper-item 上。这样可以动态生成轮播图内容。

5. 图片的显示

在 swiper-item 中使用 image 组件来显示图片，并通过 src 属性绑定图片的 URL。mode 属性可以控制图片的显示模式，如 aspectFill 表示保持图片比例填充整个容器。

6. 示例代码解析

• imgUrls: 轮播图的图片 URL 数组。
• indicatorDots: 显示面板指示点。
• autoplay: 自动切换轮播图。
• interval: 自动切换的时间间隔为 5 秒。
• duration: 滑动动画时长为 1 秒。

通过以上代码，可以实现一个简单的轮播图功能。