介绍

自定义轮播图指示点。

引入

import SwiperDot from 'sard-uniapp/components/swiper-dot/swiper-dot.vue'

代码演示

基础使用

使用一个相对定位的容器包裹轮播图组件和轮播图指示点组件， 使用 current 属性设置活动指示点，使用 type 属性设置指示点类型，使用 total 属性设置指示点总数或者使用 list 属性设置指示文本（用于 title 类型）。

vue lang="ts"

<template>
  <view style="position: relative">
    <swiper
      :current="current"
      @change="current = $event.detail.current"
      autoplay
      :interval="3000"
    >
      <swiper-item class="slide slide1">1</swiper-item>
      <swiper-item class="slide slide2">2</swiper-item>
      <swiper-item class="slide slide3">3</swiper-item>
    </swiper>
    <sar-swiper-dot
      :current="current"
      :type="type"
      :list="list"
      field="title"
    />
  </view>

  <sar-radio-group v-model="type" root-style="margin-top: 40rpx">
    <template #custom="{ toggle }">
      <sar-list card>
        <sar-list-item
          v-for="(item, i) in typeList"
          :key="i"
          :title="item"
          hover
          @click="toggle(item)"
        >
          <template #icon>
            <sar-radio readonly :value="item" />
          </template>
        </sar-list-item>
      </sar-list>
    </template>
  </sar-radio-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type SwiperDotProps } from 'sard-uniapp'

const current = ref(0)
const list = [
  {
    title: '老夫聊发少年狂，左牵黄，右擎苍，锦帽貂裘，千骑卷平冈。',
  },
  {
    title: '为报倾城随太守，亲射虎，看孙郎。',
  },
  {
    title:
      '酒酣胸胆尚开张。鬓微霜，又何妨！持节云中，何日遣冯唐？会挽雕弓如满月，西北望，射天狼。',
  },
]
const type = ref<SwiperDotProps['type']>('dot')
const typeList = ['dot', 'dot-bar', 'index', 'title', 'fraction']
</script>

<style lang="scss" scoped>
.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 120rpx;
  font-weight: bold;
  color: var(--sar-white);
}
.slide1 {
  background-color: rgba(var(--sar-red-rgb), 0.3);
}
.slide2 {
  background-color: rgba(var(--sar-green-rgb), 0.3);
}
.slide3 {
  background-color: rgba(var(--sar-blue-rgb), 0.3);
}
</style>

vue lang="js"

<template>
  <view style="position: relative">
    <swiper
      :current="current"
      @change="current = $event.detail.current"
      autoplay
      :interval="3000"
    >
      <swiper-item class="slide slide1">1</swiper-item>
      <swiper-item class="slide slide2">2</swiper-item>
      <swiper-item class="slide slide3">3</swiper-item>
    </swiper>
    <sar-swiper-dot
      :current="current"
      :type="type"
      :list="list"
      field="title"
    />
  </view>

  <sar-radio-group v-model="type" root-style="margin-top: 40rpx">
    <template #custom="{ toggle }">
      <sar-list card>
        <sar-list-item
          v-for="(item, i) in typeList"
          :key="i"
          :title="item"
          hover
          @click="toggle(item)"
        >
          <template #icon>
            <sar-radio readonly :value="item" />
          </template>
        </sar-list-item>
      </sar-list>
    </template>
  </sar-radio-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const current = ref(0);
const list = [
  {
    title: "\u8001\u592B\u804A\u53D1\u5C11\u5E74\u72C2\uFF0C\u5DE6\u7275\u9EC4\uFF0C\u53F3\u64CE\u82CD\uFF0C\u9526\u5E3D\u8C82\u88D8\uFF0C\u5343\u9A91\u5377\u5E73\u5188\u3002"
  },
  {
    title: "\u4E3A\u62A5\u503E\u57CE\u968F\u592A\u5B88\uFF0C\u4EB2\u5C04\u864E\uFF0C\u770B\u5B59\u90CE\u3002"
  },
  {
    title: "\u9152\u9163\u80F8\u80C6\u5C1A\u5F00\u5F20\u3002\u9B13\u5FAE\u971C\uFF0C\u53C8\u4F55\u59A8\uFF01\u6301\u8282\u4E91\u4E2D\uFF0C\u4F55\u65E5\u9063\u51AF\u5510\uFF1F\u4F1A\u633D\u96D5\u5F13\u5982\u6EE1\u6708\uFF0C\u897F\u5317\u671B\uFF0C\u5C04\u5929\u72FC\u3002"
  }
];
const type = ref("dot");
const typeList = ["dot", "dot-bar", "index", "title", "fraction"];
</script>

<style lang="scss" scoped>
.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 120rpx;
  font-weight: bold;
  color: var(--sar-white);
}
.slide1 {
  background-color: rgba(var(--sar-red-rgb), 0.3);
}
.slide2 {
  background-color: rgba(var(--sar-green-rgb), 0.3);
}
.slide3 {
  background-color: rgba(var(--sar-blue-rgb), 0.3);
}
</style>

API

SwiperDotProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
type	指示点类型	'dot' | 'dot-bar' | 'index' | 'title' | 'fraction'	'dot'
current	当前指示点索引	number	0
total	指示点总数	number	0
list	用于 title 类型的文本数据	any[]	-
field	type 为 title 时，显示的内容字段	string	'title'

主题定制

CSS 变量

page,
.sar-portal {
  --sar-swiper-dot-bottom: 20rpx;
  --sar-swiper-dot-gap: 12rpx;
  --sar-swiper-dot-size: 12rpx;
  --sar-swiper-dot-font-size: var(--sar-text-sm);
  --sar-swiper-dot-color: var(--sar-white);
  --sar-swiper-dot-bg: rgba(0, 0, 0, 0.3);
  --sar-swiper-dot-active-bg: rgba(0, 0, 0, 0.7);

  --sar-swiper-dot-bar-active-size: 36rpx;
  --sar-swiper-dot-bar-duration: var(--sar-duration);

  --sar-swiper-dot-index-size: 32rpx;

  --sar-swiper-dot-title-padding: 16rpx;
  --sar-swiper-dot-title-font-size: var(--sar-text-sm);
  --sar-swiper-dot-title-color: var(--sar-white);
  --sar-swiper-dot-title-bg: rgba(0, 0, 0, 0.3);

  --sar-swiper-dot-fraction-right: 20rpx;
  --sar-swiper-dot-fraction-bottom: 20rpx;
  --sar-swiper-dot-fraction-padding: 4rpx 16rpx;
  --sar-swiper-dot-fraction-font-size: var(--sar-text-sm);
  --sar-swiper-dot-fraction-color: var(--sar-white);
  --sar-swiper-dot-fraction-bg: rgba(0, 0, 0, 0.3);
}