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

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

api SwiperDot Props. 应该是那里我猜想应该是作者拼写错误吧。  应该是想表达SwiperDot Props。   而不是SwiperDod Props
上级 7d162d0c
::: tip 组件名:uni-swiper-dot ::: tip 组件名:uni-swiper-dot
> 代码块: `uSwiperDot` > 代码块: `uSwiperDot`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot) [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot)
::: :::
自定义轮播图指示点 自定义轮播图指示点
## 介绍 ## 介绍
::: warning 注意事项 ::: warning 注意事项
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。 > 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
- 本组件依赖 `swiper` 组件,请与`swiper`组件配合使用 - 本组件依赖 `swiper` 组件,请与`swiper`组件配合使用
- `width``height` 如非必要,请勿设置过大,或者过小 - `width``height` 如非必要,请勿设置过大,或者过小
- `swiper-item` 尽量控制在一定数量之内,否则指示点可能会超出屏幕 - `swiper-item` 尽量控制在一定数量之内,否则指示点可能会超出屏幕
- 暂不支持垂直方向的指示点 - 暂不支持垂直方向的指示点
::: :::
### 基本用法 ### 基本用法
``template`` 中的使用 ``template`` 中的使用
```html ```html
<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode"> <uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
<swiper class="swiper-box" @change="change"> <swiper class="swiper-box" @change="change">
<swiper-item v-for="(item ,index) in info" :key="index"> <swiper-item v-for="(item ,index) in info" :key="index">
<view class="swiper-item"> <view class="swiper-item">
{{item.content}} {{item.content}}
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</uni-swiper-dot> </uni-swiper-dot>
``` ```
```javascript ```javascript
export default { export default {
data() { data() {
return { return {
info: [{ info: [{
content: '内容 A' content: '内容 A'
}, { }, {
content: '内容 B' content: '内容 B'
}, { }, {
content: '内容 C' content: '内容 C'
}], }],
current: 0, current: 0,
mode: 'round', mode: 'round',
} }
}, },
methods: { methods: {
change(e) { change(e) {
this.current = e.detail.current; this.current = e.detail.current;
} }
} }
} }
``` ```
## API ## API
### SwiperDod Props ### SwiperDot Props
|属性名|类型|默认值|说明| |属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|
|current|Number |0|当前指示点索引,必须是通过 `swiper``change` 事件获取到的 `e.detail.current`| |current|Number |0|当前指示点索引,必须是通过 `swiper``change` 事件获取到的 `e.detail.current`|
|mode|String|default|指示点的类型,可选值:default 、round 、nav 、 indexes| |mode|String|default|指示点的类型,可选值:default 、round 、nav 、 indexes|
|field|String|-| mode 为 nav 时,显示的内容字段(mode = nav 时必填)| |field|String|-| mode 为 nav 时,显示的内容字段(mode = nav 时必填)|
|info|Array |-|轮播图的数据,通过数组长度决定指示点个数| |info|Array |-|轮播图的数据,通过数组长度决定指示点个数|
|dotsStyles |Object |-|指示点样式| |dotsStyles |Object |-|指示点样式|
#### dotsStyles Options #### dotsStyles Options
|属性名|类型 |默认值|说明| |属性名|类型 |默认值|说明|
|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|
|width|Number| 8|指示点宽度 **在 mode = nav、mode = indexes 时不生效**| |width|Number| 8|指示点宽度 **在 mode = nav、mode = indexes 时不生效**|
|bottom|Number | 10|指示点距 `swiper` 底部的高度| |bottom|Number | 10|指示点距 `swiper` 底部的高度|
|color|Color | '#fff'|指示点前景色,**只在 mode = nav ,mode = indexes 时生效** | |color|Color | '#fff'|指示点前景色,**只在 mode = nav ,mode = indexes 时生效** |
|backgroundColor|Color | 'rgba(0, 0, 0, .3)'|未选择指示点背景色| |backgroundColor|Color | 'rgba(0, 0, 0, .3)'|未选择指示点背景色|
|border|Border | '1px rgba(0, 0, 0, .3) solid' |未选择指示点边框样式| |border|Border | '1px rgba(0, 0, 0, .3) solid' |未选择指示点边框样式|
|selectedBackgroundColor|Color | '#333'|已选择指示点背景色,**在 mode = nav 时不生效**| |selectedBackgroundColor|Color | '#333'|已选择指示点背景色,**在 mode = nav 时不生效**|
|selectedBorder|Border | '1px rgba(0, 0, 0, .9) solid' |已选择指示点边框样式,**在 mode = nav 时不生效**| |selectedBorder|Border | '1px rgba(0, 0, 0, .9) solid' |已选择指示点边框样式,**在 mode = nav 时不生效**|
## 示例 ## 示例
::: warning 注意 ::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。 示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。 请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。
::: :::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot ::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot
> Template > Template
``` html ``` html
<template> <template>
<view class="content"> <view class="content">
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode" <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
...@@ -140,8 +140,8 @@ export default { ...@@ -140,8 +140,8 @@ export default {
</view> </view>
</template> </template>
``` ```
> Script > Script
```html ```html
<script> <script>
export default { export default {
...@@ -218,8 +218,8 @@ export default { ...@@ -218,8 +218,8 @@ export default {
} }
} }
</script> </script>
``` ```
> Style > Style
```html ```html
<style lang="scss"> <style lang="scss">
.swiper-box { .swiper-box {
...@@ -333,9 +333,9 @@ export default { ...@@ -333,9 +333,9 @@ export default {
border-color: #007aff; border-color: #007aff;
border-width: 1px; border-width: 1px;
} }
</style> </style>
``` ```
::: :::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot) [完整示例演示](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.
先完成此消息的编辑!
想要评论请 注册