diff --git a/packages/swipe/demo/index.vue b/packages/swipe/demo/index.vue index c0592d45d..da7149a9b 100644 --- a/packages/swipe/demo/index.vue +++ b/packages/swipe/demo/index.vue @@ -1,7 +1,10 @@ <template> <demo-section> <demo-block :title="$t('basicUsage')"> - <van-swipe :autoplay="3000"> + <van-swipe + :autoplay="3000" + indicator-color="white" + > <van-swipe-item>1</van-swipe-item> <van-swipe-item>2</van-swipe-item> <van-swipe-item>3</van-swipe-item> @@ -21,7 +24,10 @@ </demo-block> <demo-block :title="$t('title3')"> - <van-swipe @change="onChange"> + <van-swipe + indicator-color="white" + @change="onChange" + > <van-swipe-item>1</van-swipe-item> <van-swipe-item>2</van-swipe-item> <van-swipe-item>3</van-swipe-item> @@ -33,6 +39,7 @@ <van-swipe vertical :autoplay="3000" + indicator-color="white" class="demo-swipe--vertical" > <van-swipe-item>1</van-swipe-item> @@ -47,6 +54,7 @@ :autoplay="3000" :width="300" :loop="false" + indicator-color="white" > <van-swipe-item>1</van-swipe-item> <van-swipe-item>2</van-swipe-item> diff --git a/packages/swipe/en-US.md b/packages/swipe/en-US.md index 8eff2fbe3..8da2ac6c1 100644 --- a/packages/swipe/en-US.md +++ b/packages/swipe/en-US.md @@ -13,7 +13,7 @@ Vue.use(Swipe).use(SwipeItem); Use `autoplay` prop to set autoplay interval ```html -<van-swipe :autoplay="3000"> +<van-swipe :autoplay="3000" indicator-color="white"> <van-swipe-item>1</van-swipe-item> <van-swipe-item>2</van-swipe-item> <van-swipe-item>3</van-swipe-item> @@ -128,7 +128,8 @@ export default { | loop | Whether to enable loop | `Boolean` | `true` | | vertical | Vertical Scrolling | `Boolean` | `false` | | touchable | Whether touchable | `Boolean` | `true` | -| show-indicators | Whether to show indocators | `Boolean` | `true` | +| show-indicators | Whether to show indicators | `Boolean` | `true` | +| indicator-color | Indicator color | `String` | `#1989fa` | | initial-swipe | Index of initial swipe, start from 0 | `Number` | `0` | | width | Set Swiper Item Width | `Number` | `0` | | height | Set Swiper Item Height | `Number` | `0` | diff --git a/packages/swipe/index.less b/packages/swipe/index.less index 9b8c4a9dd..ac488b7a2 100644 --- a/packages/swipe/index.less +++ b/packages/swipe/index.less @@ -30,17 +30,19 @@ } &__indicator { + opacity: .3; border-radius: 100%; - background-color: @gray-dark; + background-color: @blue; width: @swipe-indicator; height: @swipe-indicator; + transition: opacity .2s; &:not(:last-child) { margin-right: @swipe-indicator; } &--active { - background-color: @orange; + opacity: 1; } } } diff --git a/packages/swipe/index.vue b/packages/swipe/index.vue index f3dd60e22..cb2fe7dc9 100644 --- a/packages/swipe/index.vue +++ b/packages/swipe/index.vue @@ -19,6 +19,7 @@ <i v-for="index in count" :class="b('indicator', { active: index - 1 === activeIndicator })" + :style="indicatorStyle" /> </div> </slot> @@ -40,6 +41,7 @@ export default create({ height: Number, autoplay: Number, vertical: Boolean, + indicatorColor: String, loop: { type: Boolean, default: true @@ -144,6 +146,12 @@ export default create({ transitionDuration: `${this.swiping ? 0 : this.duration}ms`, transform: `translate${this.vertical ? 'Y' : 'X'}(${this.offset}px)` }; + }, + + indicatorStyle() { + return { + backgroundColor: this.indicatorColor + }; } }, diff --git a/packages/swipe/zh-CN.md b/packages/swipe/zh-CN.md index 85acebca0..bae6d919b 100644 --- a/packages/swipe/zh-CN.md +++ b/packages/swipe/zh-CN.md @@ -13,7 +13,7 @@ Vue.use(Swipe).use(SwipeItem); 通过`autoplay`属性设置自动轮播间隔 ```html -<van-swipe :autoplay="3000"> +<van-swipe :autoplay="3000" indicator-color="white"> <van-swipe-item>1</van-swipe-item> <van-swipe-item>2</van-swipe-item> <van-swipe-item>3</van-swipe-item> @@ -128,6 +128,7 @@ export default { | initial-swipe | 初始位置索引值 | `Number` | `0` | - | | loop | 是否开启循环播放 | `Boolean` | `true` | - | | show-indicators | 是否显示指示器 | `Boolean` | `true` | - | +| indicator-color | 指示器颜色 | `String` | `#1989fa` | 1.4.5 | | vertical | 是否为纵向滚动 | `Boolean` | `false` | 1.1.1 | | touchable | 是否可以通过手势滑动 | `Boolean` | `true` | 1.1.1 | | width | 滑块宽度 | `Number` | `0` | 1.2.1 |