提交 27e75c91 编写于 作者: 王禹02 提交者: meHaoTian

update docs/component/uniui/uni-swiper-dot.md.

api SwiperDot Props. 应该是那里我猜想应该是作者拼写错误吧。  应该是想表达SwiperDot Props。   而不是SwiperDod Props
上级 7d162d0c
::: tip 组件名:uni-swiper-dot
> 代码块: `uSwiperDot`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot)
:::
自定义轮播图指示点
## 介绍
::: warning 注意事项
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
- 本组件依赖 `swiper` 组件,请与`swiper`组件配合使用
- `width``height` 如非必要,请勿设置过大,或者过小
- `swiper-item` 尽量控制在一定数量之内,否则指示点可能会超出屏幕
- 暂不支持垂直方向的指示点
:::
### 基本用法
``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 时不生效**|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot
> Template
``` html
::: tip 组件名:uni-swiper-dot
> 代码块: `uSwiperDot`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot)
:::
自定义轮播图指示点
## 介绍
::: warning 注意事项
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
- 本组件依赖 `swiper` 组件,请与`swiper`组件配合使用
- `width``height` 如非必要,请勿设置过大,或者过小
- `swiper-item` 尽量控制在一定数量之内,否则指示点可能会超出屏幕
- 暂不支持垂直方向的指示点
:::
### 基本用法
``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
### 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 时不生效**|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot
> Template
``` html
<template>
<view class="content">
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
......@@ -140,8 +140,8 @@ export default {
</view>
</template>
```
> Script
```
> Script
```html
<script>
export default {
......@@ -218,8 +218,8 @@ export default {
}
}
</script>
```
> Style
```
> Style
```html
<style lang="scss">
.swiper-box {
......@@ -333,9 +333,9 @@ export default {
border-color: #007aff;
border-width: 1px;
}
</style>
```
:::
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册