组件名:uni-swiper-dot

代码块: uSwiperDot

点击下载&安装 (opens new window)

自定义轮播图指示点

# 介绍

注意事项

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

  • 本组件依赖 swiper 组件,请与swiper组件配合使用
  • widthheight 如非必要,请勿设置过大,或者过小
  • 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 当前指示点索引,必须是通过 swiperchange 事件获取到的 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 等多个组件,直接拷贝示例代码将无法正常运行 。

请到 组件下载页面 (opens new window) ,在页面右侧选择 使用 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>

完整示例演示 (opens new window)