SwiperDot 轮播图指示点 
概述
SwiperDot 轮播图指示点，一般用于banner轮播图。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiSwiperDot from "@/components/firstui/fui-swiper-dot/fui-swiper-dot.vue"
export default {
components:{
fuiSwiperDot
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
默认使用
通过 items 属性设置轮播图数据，current 属性设置当前所在轮播图的索引。
<fui-swiper-dot :items="items" :current="current">
<swiper class="fui-banner__wrap" @change="change" circular :indicator-dots="false" autoplay
:interval="4000" :duration="150">
<swiper-item v-for="(item,index) in items" :key="index">
<view class="fui-banner__item" :style="{background:item.background}">First UI 组件库</view>
</swiper-item>
</swiper>
</fui-swiper-dot>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
data() {
return {
current: 0,
items: [{
background: '#09BE4F'
}, {
background: '#FFB703'
}, {
background: '#B2B2B2'
}]
}
},
methods: {
change(e) {
this.current = e.detail.current;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.fui-banner__item {
width: 100%;
height: 360rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 34rpx;
font-weight: 600;
}
.fui-banner__wrap {
height: 360rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
展示标题
通过 type 属性来设置指示点展示类型，field 属性设置标题字段名称，styles 属性设置指示点样式，items 属性设置轮播图数据，current 属性设置当前所在轮播图的索引。
<fui-swiper-dot type="3" field="title" :styles="styles" :items="items" :current="current">
<swiper class="fui-banner__wrap" @change="change" circular :indicator-dots="false" autoplay
:interval="4500" :duration="150">
<swiper-item v-for="(item,index) in items" :key="index">
<view class="fui-banner__item" :style="{background:item.background}">First UI 组件库</view>
</swiper-item>
</swiper>
</fui-swiper-dot>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
data() {
return {
current: 0,
items: [{
background: '#09BE4F',
title: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。'
}, {
background: '#FFB703',
title: 'UI 样式可配置，拓展灵活，轻松适应不同的设计风格。'
}, {
background: '#B2B2B2',
title: '支持App-vue（Android、IOS）、App-Nvue（Android、IOS）。'
}],
styles: {
height: 80,
bottom: 0
}
}
},
methods: {
change(e) {
this.current = e.detail.current;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.fui-banner__item {
width: 100%;
height: 360rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 34rpx;
font-weight: 600;
}
.fui-banner__wrap {
height: 360rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 放置滑块视图容器组件内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| items | Array | 轮播图数据 | [ ] | - |
| type | Number, String | 指示点显示类型：1-圆点 2-数字索引 3-标题 4-固定在右侧数字索引 | 1 | - |
| current | Number, String | 当前所在轮播图索引 | 0 | - |
| styles | Object | 指示点样式，具体属性见下方详细说明 | { } | - |
| field | String | 标题字段名称，仅在类型为3时有效 | - | - |
//styles 属性值说明。以下属性值并非全部必传，根据显示类型设置相关属性值即可。
{
//指示点容器left值,单位rpx，type=1/2/3时有效
left: 0,
//指示点容器right值,单位rpx，type=1/2/3/4时有效
right: 0,
//指示点容器bottom值，单位rpx，type=1/2/3/4时有效
bottom: 32,
//指示点宽度，单位rpx，type=1/2/4时有效
width: 16,
//当前选中的指示点宽度，单位rpx，type=1时有效
activeWidth: 16,
//指示点高度，单位rpx，type=1/2/3/4时有效，当type=3时最小高度为64
height: 16,
//指示点是否为圆角,type=1/2/4时有效
radius: true,
//指示点背景色，type=1/2/3/4时有效
background: 'rgba(0,0,0,.6)',
//当前选中的指示点背景色，type=1/2时有效
activeBackground: '#465CFF',
//指示点字体颜色，type=2/3/4时有效
color: '#fff',
//当前选中的指示点字体颜色，type=2时有效
activeColor: '#fff',
//指示点字体大小，单位rpx，type=2/3/4时有效
size: 28,
//指示点左右外边距，单位rpx，type=1/2时有效
margin: 8,
//指示点容器左右内边距，type=3时有效
padding: 32
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击指示点时触发 | { index : 指示点索引值 } |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。