Swiper 自定义指示点，让你的小程序更炫酷！

2023-02-10 08:27:06

Swiper 自定义指示点：提升你的小程序视觉体验

简介

在小程序开发中，Swiper 组件是一个必不可少的元素，它可以实现图片轮播的效果。为了提升用户的视觉体验，我们可以对 Swiper 的指示点进行自定义。本文将详细介绍如何使用 Swiper 自定义指示点，让你的小程序更加炫酷。

配置指示点

在 Swiper 组件中，我们可以通过以下方式配置指示点：

<swiper :indicator-dots="true"></swiper>

其中，indicator-dots 属性表示是否显示指示点，设置为 true 即可显示。

自定义指示点

默认情况下，Swiper 的指示点是一个简单的圆点。我们可以通过以下方式自定义指示点的样式：

<swiper :indicator-dots="true" :indicator-active-color="'#ff0000'" :indicator-inactive-color="'#ffffff'"></swiper>

其中，indicator-active-color 和 indicator-inactive-color 属性分别用于设置当前显示指示点和未显示指示点的颜色。

代码示例

下面是一个使用 Swiper 自定义指示点的完整代码示例：

<template>
  <view class="container">
    <swiper :indicator-dots="true" :autoplay="true" interval="3000">
      <swiper-item v-for="(item, index) in list" :key="index">
        <image :src="item.image" mode="aspectFit"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          image: 'https://example.com/image1.jpg',
        },
        {
          image: 'https://example.com/image2.jpg',
        },
        {
          image: 'https://example.com/image3.jpg',
        },
      ],
    };
  },
};
</script>

<style>
.container {
  height: 200px;
}

.swiper {
  height: 100%;
}

.swiper-item {
  height: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>