290144e9
 易尊强
第一次
|
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
## SwiperDot 轮播图指示点
> **组件名：uni-swiper-dot**
> 代码块： `uSwiperDot`
自定义轮播图指示点
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 本组件依赖 `swiper` 组件,请与`swiper`组件配合使用
> - `width` 与 `height` 如非必要，请勿设置过大，或者过小
> - `swiper-item` 尽量控制在一定数量之内，否则指示点可能会超出屏幕
> - 暂不支持垂直方向的指示点
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中的使用
```html
<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>
```
```javascript
export default {
data() {
return {
info: [{
content: '内容 A'
}, {
content: '内容 B'
}, {
content: '内容 C'
}],
current: 0,
mode: 'round',
}
},
methods: {
change(e) {
this.current = e.detail.current;
}
}
}
```
## API
### SwiperDod 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 时不生效** |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot](https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot)
|
