diff --git a/document/components/docs/en-US/slide.md b/document/components/docs/en-US/slide.md
index cdc20434f6bd2746623390d840d1537d04a45650..2f89ef8c71ebfa3698181fbbcd8c079efd22622c 100644
--- a/document/components/docs/en-US/slide.md
+++ b/document/components/docs/en-US/slide.md
@@ -46,6 +46,14 @@
}
```
+- Initial Index
+
+ Initial Index value, default 0.
+
+ ```html
+
+ ```
+
- Loop play
Loop play is turned on by default. You can cnfigure that with `loop` attribute.
@@ -88,16 +96,88 @@
```
+
+- refresh method
+
+ When Slide Items updated or Slide props updated, you can call `refresh` method to update Slide view.
+
+ ```html
+
+
+
+
+
+
+
+ ```
+ ```js
+ const item3 = {
+ url: 'http://www.didichuxing.com/',
+ image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
+ }
+ export default {
+ data() {
+ return {
+ items: [
+ {
+ url: 'http://www.didichuxing.com/',
+ image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
+ },
+ {
+ url: 'http://www.didichuxing.com/',
+ image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
+ }
+ ]
+ }
+ },
+ mounted() {
+ setTimeout(() => {
+ this.items.push(item3)
+ this.$refs.slide.refresh()
+ }, 2000)
+ }
+ }
+ ```
+
+ Added an new slide item 2 seconds later and called `refresh`.
+
+- Modify dots style
+
+ Default dot, you can change it by using dots slot.
+
+ ```html
+
+
+
+ {{index + 1}}
+
+
+
+ ```
+
+ The scoped slots provide two parameters: current active index `current` and slide items length `dots`.
+
### Props configuration
| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
+| initialIndex | initial index | Number | - | 0 |
| loop | whether to loop play | Boolean | true/false | true |
| autoPlay | whether to play automatically | Boolean | true/false | true |
| interval | interval of play | Number | - | 4000 |
| threshold | sliding threshold of switching pages | Number | (0, 1) | 0.3 |
| speed | speed of switching pages | Number | - | 400 |
+### Slot
+
+| Name | Description | Scope Parameters |
+| - | - | - |
+| default | Default content contains cube-slide-item components | - |
+| dots | Dots content | dots: Slide items length
current: current active index |
+
### Events
| Event Name | Description | Parameters |
diff --git a/document/components/docs/zh-CN/slide.md b/document/components/docs/zh-CN/slide.md
index 1936242b8e9c78c0cba1da0e60a96887cbefa696..47c21e3595f82bd8a63bdd087391a2946dbdf120 100644
--- a/document/components/docs/zh-CN/slide.md
+++ b/document/components/docs/zh-CN/slide.md
@@ -25,10 +25,12 @@
{
url: 'http://www.didichuxing.com/',
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
- }, {
+ },
+ {
url: 'http://www.didichuxing.com/',
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
- }, {
+ },
+ {
url: 'http://www.didichuxing.com/',
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
}
@@ -46,12 +48,19 @@
}
```
+- 初始索引
+
+ 初始化时展示的位置索引值,默认为 0。
+
+ ```html
+
+ ```
+
- 循环播放
默认开启循环播放,可通过 loop 属性配置。
```html
-
```
@@ -60,7 +69,6 @@
默认开启自动播放,可通过 auto-play 属性配置。
```html
-
```
@@ -78,6 +86,7 @@
```html
+ ```
- 切换页面的速度
@@ -87,16 +96,82 @@
```
+- refresh 方法
+
+ 当新增或者删除 Slide Item 项或者修改 Slide 配置的时候,可以调用实例的 refresh 方法更新 Slide。
+
+ ```html
+
+
+
+
+
+
+
+ ```
+ ```js
+ const item3 = {
+ url: 'http://www.didichuxing.com/',
+ image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
+ }
+ export default {
+ data() {
+ return {
+ items: [
+ {
+ url: 'http://www.didichuxing.com/',
+ image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
+ },
+ {
+ url: 'http://www.didichuxing.com/',
+ image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
+ }
+ ]
+ }
+ },
+ mounted() {
+ setTimeout(() => {
+ this.items.push(item3)
+ this.$refs.slide.refresh()
+ }, 2000)
+ }
+ }
+ ```
+
+ 延迟 2 秒钟后新增一个 Slide Item,新增完成后需要调用 refresh 方法更新。
+
+- 修改 dots 内容
+
+ 默认是点,可通过插槽修改。
+
+ ```html
+
+
+ {{index + 1}}
+
+
+ ```
+
+ 作用域插槽提供了所需的当前索引值 `current` 以及长度 `dots`。
+
### Props 配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| - | - | - | - | - |
+| initialIndex | 初始索引值 | Number | - | 0 |
| loop | 是否循环播放 | Boolean | true/false | true |
| autoPlay | 是否自动播放 | Boolean | true/false | true |
| interval | 播放间隔 | Number | - | 4000 |
| threshold | 切换页面的滑动阈值 | Number | (0, 1) | 0.3 |
| speed | 切换页面的速度 | Number | - | 400 |
+### 插槽
+
+| 名字 | 说明 | 作用域参数 |
+| - | - | - |
+| default | 默认内容,由 cube-slide-item 构成 | - |
+| dots | dots 内容 | dots: 轮播项长度
current: 当前索引 |
+
### 事件
| 事件名 | 说明 | 参数 |
diff --git a/example/pages/slide.vue b/example/pages/slide.vue
index ffea14b9d69d18e8da9b7de350c7667125fe41bc..1dd0dccef3113dd132f8fd7cdafb58195f49237a 100644
--- a/example/pages/slide.vue
+++ b/example/pages/slide.vue
@@ -5,6 +5,7 @@
+
+ {{index + 1}}
+
+
+
+
@@ -38,6 +46,14 @@
+
+
+
+
+
+
@@ -49,6 +65,10 @@
import SwitchOption from '../components/switch-option'
import InputOption from '../components/input-option'
+ const item3 = {
+ url: 'http://www.didichuxing.com/',
+ image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
+ }
export default{
data() {
return {
@@ -59,9 +79,6 @@
}, {
url: 'http://www.didichuxing.com/',
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
- }, {
- url: 'http://www.didichuxing.com/',
- image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
}
],
ifSlide: true,
@@ -69,13 +86,19 @@
autoPlay: true,
interval: 4000,
threshold: 0.3,
- speed: 400
+ speed: 400,
+ initialIndex: 1,
+ dotsSlot: false,
+ addItem3: false
}
},
watch: {
loop() {
this.rebuildSlide()
},
+ dotsSlot() {
+ this.rebuildSlide()
+ },
autoPlay() {
this.rebuildSlide()
},
@@ -87,6 +110,14 @@
},
speed() {
this.rebuildSlide()
+ },
+ addItem3(newV) {
+ if (newV) {
+ this.items.push(item3)
+ } else {
+ this.items.pop()
+ }
+ this.rebuildSlide()
}
},
methods: {
@@ -103,20 +134,40 @@
// this.ifSlide = true
// })
},
+ updateItem3(val) {
+ this.addItem3 = val
+ },
updateLoop(val) {
this.loop = val
},
+ updateDotsSlot(val) {
+ this.dotsSlot = val
+ },
updateAutoPlay(val) {
this.autoPlay = val
},
updateInterval(val) {
- this.interval = val
+ val = +val
+ if (val) {
+ this.interval = val
+ }
},
updateThreshold(val) {
- this.threshold = val
+ val = +val
+ if (val) {
+ this.threshold = val
+ }
},
updateSpeed(val) {
- this.speed = val
+ val = +val
+ if (val) {
+ this.speed = val
+ }
+ },
+ updateInitialIndex(val) {
+ if (val) {
+ this.initialIndex = +val
+ }
}
},
components: {
@@ -135,4 +186,11 @@
border-radius: 2px
overflow: hidden
box-shadow: 0 2px 9px #ddd
+ .cube-slide-dots
+ .my-dot
+ height: auto
+ font-size: 12px
+ background: none
+ &.active
+ color: #fc9153
diff --git a/src/components/slide/slide.vue b/src/components/slide/slide.vue
index d940725e6ebe904396168a2b71d2d0351f97d361..a9fe371bb6cba00e614b7e8efe6dc2279afaded8 100644
--- a/src/components/slide/slide.vue
+++ b/src/components/slide/slide.vue
@@ -4,7 +4,9 @@
-
+
+
+
@@ -18,6 +20,10 @@
export default {
name: COMPONENT_NAME,
props: {
+ initialIndex: {
+ type: Number,
+ default: 0
+ },
loop: {
type: Boolean,
default: true
@@ -42,7 +48,14 @@
data() {
return {
dots: 0,
- currentPageIndex: 0
+ currentPageIndex: this.initialIndex || 0
+ }
+ },
+ watch: {
+ initialIndex(newIndex) {
+ if (newIndex !== this.currentPageIndex) {
+ this.slide && this.slide.goToPage(newIndex)
+ }
}
},
methods: {
@@ -53,7 +66,9 @@
if (this.slide === null) {
return
}
- this.currentPageIndex = 0
+ if (this.slide !== undefined) {
+ this.currentPageIndex = 0
+ }
this.dots = 0
this._setSlideWidth()
this._initDots()
@@ -97,6 +112,8 @@
observeDOM: false
})
+ this.slide.goToPage(this.currentPageIndex, 0, 0)
+
this.slide.on('scrollEnd', this._onScrollEnd)
this.slide.on('touchend', () => {
@@ -113,9 +130,6 @@
},
_onScrollEnd() {
let pageIndex = this.slide.getCurrentPage().pageX
- if (this.loop) {
- pageIndex -= 1
- }
if (this.currentPageIndex !== pageIndex) {
this.currentPageIndex = pageIndex
this.$emit(EVENT_CHANGE, this.currentPageIndex)
@@ -129,13 +143,9 @@
this.dots = new Array(this.children.length)
},
_play() {
- let pageIndex = this.currentPageIndex + 1
- if (this.loop) {
- pageIndex += 1
- }
clearTimeout(this._timer)
this._timer = setTimeout(() => {
- this.slide.goToPage(pageIndex, 0, 400)
+ this.slide.next()
}, this.interval)
},
_deactivated() {