You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
5 years ago | |
|---|---|---|
| .. | ||
| components/uni-swiper-dot | 5 years ago | |
| changelog.md | 5 years ago | |
| package.json | 5 years ago | |
| readme.md | 5 years ago | |
readme.md
SwiperDot 轮播图指示点
代码块:
uSwiperDot
自定义轮播图指示点
为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
- 本组件依赖
swiper组件,请与swiper组件配合使用width与height如非必要,请勿设置过大,或者过小swiper-item尽量控制在一定数量之内,否则指示点可能会超出屏幕- 暂不支持垂直方向的指示点
安装方式
本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components。
如需通过npm方式使用uni-ui组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55
基本用法
在 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
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 时不生效 |