component name: uni-swiper-dot

Code block: uSwiperDot

Click to download & install

Custom carousel indicator points

# introduce

Notes

In order to avoid wrong use and bring you a bad development experience, please read the following precautions carefully before using the component, which can help you avoid some mistakes.

  • This component depends on the swiper component, please use it with the swiper component
  • width and height should not be set too large or too small unless necessary
  • swiper-item should be kept within a certain amount as much as possible, otherwise the indicator point may exceed the screen
  • Do not support vertical pointers

# Basic usage

Use in 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

property name type default value description
current Number 0 The index of the current index point, which must be e.detail.current obtained through the change event of swiper
mode String default indicates the type of the point, optional values: default , round , nav , indexes
field String - When mode is nav, the displayed content field (required when mode = nav)
info Array - The data of the carousel, the number of indicated points is determined by the length of the array
dotsStyles Object - Indicates dot styles

# dotsStyles Options

property name type default value description
width Number 8 Indicates point width Not valid when mode = nav, mode = indexes
bottom Number 10 Indicates the height of the dot from the bottom of the swiper
color Color '#fff' Indicates the point foreground color, only valid when mode = nav, mode = indexes
backgroundColor Color 'rgba(0, 0, 0, .3)' Indicating point background color not selected
border Border '1px rgba(0, 0, 0, .3) solid' point border style not selected
selectedBackgroundColor Color '#333' The background color of the indicator point has been selected, not valid when mode = nav
selectedBorder Border '1px rgba(0, 0, 0, .9) solid' indicated point border style is selected, does not take effect when mode = nav

# example

attention

The example relies on multiple components such as uni-card uni-section uni-scss, copying the example code directly will not work properly.

Please go to the Component download page, select Import sample project using HBuilderX on the right side of the page to experience the complete component example.

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>

Complete example demo