组件名：uni-swiper-dot

代码块： uSwiperDot

点击下载&安装

自定义轮播图指示点

介绍

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

• 本组件依赖 swiper 组件,请与swiper组件配合使用
• width 与 height 如非必要，请勿设置过大，或者过小
• swiper-item 尽量控制在一定数量之内，否则指示点可能会超出屏幕
• 暂不支持垂直方向的指示点

基本用法

在 template 中的使用

<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
	<swiper class="swiper-box" @change="change">
		<swiper-item v-for="(item ,index) in info" :key="index">
			<view class="swiper-item">
				{{item.content}}
			</view>
		</swiper-item>
	</swiper>
</uni-swiper-dot>

export default {
	data() {
		return {
			info: [{
				content: '内容 A'
			}, {
				content: '内容 B'
			}, {
				content: '内容 C'
			}],
			current: 0,
			mode: 'round',
		}
	},
	methods: {
		change(e) {
			this.current = e.detail.current;
		}
	}
}

API

SwiperDot Props

属性名	类型	默认值	说明
current	Number	0	当前指示点索引，必须是通过 swiper 的 change 事件获取到的 e.detail.current
mode	String	default	指示点的类型，可选值：default 、round 、nav 、 indexes
field	String	-	mode 为 nav 时，显示的内容字段（mode = nav 时必填）
info	Array	-	轮播图的数据，通过数组长度决定指示点个数
dotsStyles	Object	-	指示点样式

dotsStyles Options

属性名	类型	默认值	说明
width	Number	8	指示点宽度 在 mode = nav、mode = indexes 时不生效
bottom	Number	10	指示点距 swiper 底部的高度
color	Color	'#fff'	指示点前景色，只在 mode = nav ，mode = indexes 时生效
backgroundColor	Color	'rgba(0, 0, 0, .3)'	未选择指示点背景色
border	Border	'1px rgba(0, 0, 0, .3) solid'	未选择指示点边框样式
selectedBackgroundColor	Color	'#333'	已选择指示点背景色，在 mode = nav 时不生效
selectedBorder	Border	'1px rgba(0, 0, 0, .9) solid'	已选择指示点边框样式，在 mode = nav 时不生效

示例

注意

示例依赖了 uni-card uni-section uni-scss 等多个组件，直接拷贝示例代码将无法正常运行 。

请到 组件下载页面 ，在页面右侧选择 使用 HBuilderX导入示例项目 ，体验完整组件示例。

Template

Script

Style

<template>
	<view class="content">
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
			:dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in 3" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<uni-section title="模式选择" type="line">
			<view class="example-body">
				<view :class="{ active: modeIndex === 0 }" class="example-body-item" @click="selectMode('default', 0)">
					<text class="example-body-item-text">default</text></view>
				<view :class="{ active: modeIndex === 1 }" class="example-body-item" @click="selectMode('dot', 1)"><text
						class="example-body-item-text">dot</text></view>
				<view :class="{ active: modeIndex === 2 }" class="example-body-item" @click="selectMode('round', 2)">
					<text class="example-body-item-text">round</text></view>
				<view :class="{ active: modeIndex === 3 }" class="example-body-item" @click="selectMode('nav', 3)"><text
						class="example-body-item-text">nav</text></view>
				<view :class="{ active: modeIndex === 4 }" class="example-body-item" @click="selectMode('indexes', 4)">
					<text class="example-body-item-text">indexes</text></view>
			</view>
		</uni-section>

		<uni-section title="颜色样式选择" type="line">
			<view class="example-body">
				<template v-if="mode !== 'nav'">
					<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
						class="example-body-item" @click="selectStyle(index)">
						<view :style="{ 'background-color': item.selectedBackgroundColor, border: item.selectedBorder }"
							class="example-body-dots" />
						<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
							class="example-body-dots" />
						<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
							class="example-body-dots" />
					</view>
				</template>
				<template v-if="mode === 'nav'">
					<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
						:style="{ 'background-color': item.selectedBackgroundColor }" class="example-body-item"
						@click="selectStyle(index)">
						<text class="example-body-item-text" :style="{ color: item.color }">内容</text>
					</view>
				</template>
			</view>
		</uni-section>

	</view>
</template>

完整示例演示