docs: prettier all markdown files
This commit is contained in:
+53
-53
@@ -25,13 +25,13 @@ Use `autoplay` prop to set autoplay interval
|
||||
</van-swipe>
|
||||
|
||||
<style>
|
||||
.my-swipe .van-swipe-item {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
.my-swipe .van-swipe-item {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -58,11 +58,11 @@ export default {
|
||||
return {
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Change Event
|
||||
@@ -83,9 +83,9 @@ export default {
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Toast('Current Swipe index:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Vertical Scrolling
|
||||
@@ -128,14 +128,14 @@ export default {
|
||||
</van-swipe>
|
||||
|
||||
<style>
|
||||
.custom-indicator {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
padding: 2px 5px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-indicator {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
padding: 2px 5px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -143,15 +143,15 @@ export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0
|
||||
}
|
||||
current: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.current = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
@@ -159,38 +159,38 @@ export default {
|
||||
### Swipe Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| autoplay | Autoplay interval (ms) | *number \| string* | - |
|
||||
| duration | Animation duration (ms) | *number \| string* | `500` |
|
||||
| initial-swipe | Index of initial swipe, start from 0 | *number \| string* | `0` |
|
||||
| width | Set Swiper Item Width | *number \| string* | `0` |
|
||||
| height | Set Swiper Item Height | *number \| string* | `0` |
|
||||
| loop | Whether to enable loop | *boolean* | `true` |
|
||||
| show-indicators | Whether to show indicators | *boolean* | `true` |
|
||||
| vertical | Whether to be vertical Scrolling | *boolean* | `false` |
|
||||
| touchable | Whether to allow swipe by touch gesture | *boolean* | `true` |
|
||||
| stop-propagation `v2.1.0` | Whether to stop touchmove event propagation | *boolean* | `false` |
|
||||
| lazy-render `v2.5.8` | Whether to enable lazy render | *boolean* | `false` |
|
||||
| indicator-color | Indicator color | *string* | `#1989fa` |
|
||||
| --- | --- | --- | --- |
|
||||
| autoplay | Autoplay interval (ms) | _number \| string_ | - |
|
||||
| duration | Animation duration (ms) | _number \| string_ | `500` |
|
||||
| initial-swipe | Index of initial swipe, start from 0 | _number \| string_ | `0` |
|
||||
| width | Set Swiper Item Width | _number \| string_ | `0` |
|
||||
| height | Set Swiper Item Height | _number \| string_ | `0` |
|
||||
| loop | Whether to enable loop | _boolean_ | `true` |
|
||||
| show-indicators | Whether to show indicators | _boolean_ | `true` |
|
||||
| vertical | Whether to be vertical Scrolling | _boolean_ | `false` |
|
||||
| touchable | Whether to allow swipe by touch gesture | _boolean_ | `true` |
|
||||
| stop-propagation `v2.1.0` | Whether to stop touchmove event propagation | _boolean_ | `false` |
|
||||
| lazy-render `v2.5.8` | Whether to enable lazy render | _boolean_ | `false` |
|
||||
| indicator-color | Indicator color | _string_ | `#1989fa` |
|
||||
|
||||
### Swipe Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| Event | Description | Arguments |
|
||||
| ------ | ----------------------------------- | ----------------------------- |
|
||||
| change | Triggered when current swipe change | index: index of current swipe |
|
||||
|
||||
### SwipeItem Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when clicked | *event: Event* |
|
||||
| Event | Description | Arguments |
|
||||
| ----- | ---------------------- | -------------- |
|
||||
| click | Triggered when clicked | _event: Event_ |
|
||||
|
||||
### Swipe Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| --- | --- | --- | --- |
|
||||
| prev `v2.4.2` | Swipe to prev item | - | - |
|
||||
| next `v2.4.2` | Swipe to next item | - | - |
|
||||
| swipeTo | Swipe to target index | index: target index, options: Options | void |
|
||||
@@ -198,13 +198,13 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance
|
||||
|
||||
### swipeTo Options
|
||||
|
||||
| Name | Description | Type |
|
||||
|------|------|------|------|
|
||||
| immediate | Whether to skip animation | *boolean* |
|
||||
| Name | Description | Type |
|
||||
| --------- | ------------------------- | --------- |
|
||||
| immediate | Whether to skip animation | _boolean_ |
|
||||
|
||||
### Swipe Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | Content |
|
||||
| Name | Description |
|
||||
| --------- | ---------------- |
|
||||
| default | Content |
|
||||
| indicator | Custom indicator |
|
||||
|
||||
+53
-53
@@ -25,13 +25,13 @@ Vue.use(SwipeItem);
|
||||
</van-swipe>
|
||||
|
||||
<style>
|
||||
.my-swipe .van-swipe-item {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
.my-swipe .van-swipe-item {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -58,11 +58,11 @@ export default {
|
||||
return {
|
||||
images: [
|
||||
'https://img.yzcdn.cn/vant/apple-1.jpg',
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
'https://img.yzcdn.cn/vant/apple-2.jpg',
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 监听 change 事件
|
||||
@@ -83,9 +83,9 @@ export default {
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Toast('当前 Swipe 索引:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 纵向滚动
|
||||
@@ -134,14 +134,14 @@ export default {
|
||||
</van-swipe>
|
||||
|
||||
<style>
|
||||
.custom-indicator {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
padding: 2px 5px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-indicator {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
padding: 2px 5px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -149,15 +149,15 @@ export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0
|
||||
}
|
||||
current: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.current = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
@@ -165,38 +165,38 @@ export default {
|
||||
### Swipe Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| autoplay | 自动轮播间隔,单位为 ms | *number \| string* | - |
|
||||
| duration | 动画时长,单位为 ms | *number \| string* | `500` |
|
||||
| initial-swipe | 初始位置索引值 | *number \| string* | `0` |
|
||||
| width | 滑块宽度,单位为`px` | *number \| string* | `auto` |
|
||||
| height | 滑块高度,单位为`px` | *number \| string* | `auto` |
|
||||
| loop | 是否开启循环播放 | *boolean* | `true` |
|
||||
| show-indicators | 是否显示指示器 | *boolean* | `true` |
|
||||
| vertical | 是否为纵向滚动 | *boolean* | `false` |
|
||||
| touchable | 是否可以通过手势滑动 | *boolean* | `true` |
|
||||
| stop-propagation `v2.2.13` | 是否阻止滑动事件冒泡 | *boolean* | `true` |
|
||||
| lazy-render `v2.5.8` | 是否延迟渲染未展示的轮播 | *boolean* | `false` |
|
||||
| indicator-color | 指示器颜色 | *string* | `#1989fa` |
|
||||
| --- | --- | --- | --- |
|
||||
| autoplay | 自动轮播间隔,单位为 ms | _number \| string_ | - |
|
||||
| duration | 动画时长,单位为 ms | _number \| string_ | `500` |
|
||||
| initial-swipe | 初始位置索引值 | _number \| string_ | `0` |
|
||||
| width | 滑块宽度,单位为`px` | _number \| string_ | `auto` |
|
||||
| height | 滑块高度,单位为`px` | _number \| string_ | `auto` |
|
||||
| loop | 是否开启循环播放 | _boolean_ | `true` |
|
||||
| show-indicators | 是否显示指示器 | _boolean_ | `true` |
|
||||
| vertical | 是否为纵向滚动 | _boolean_ | `false` |
|
||||
| touchable | 是否可以通过手势滑动 | _boolean_ | `true` |
|
||||
| stop-propagation `v2.2.13` | 是否阻止滑动事件冒泡 | _boolean_ | `true` |
|
||||
| lazy-render `v2.5.8` | 是否延迟渲染未展示的轮播 | _boolean_ | `false` |
|
||||
| indicator-color | 指示器颜色 | _string_ | `#1989fa` |
|
||||
|
||||
### Swipe Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | -------------------- | ------------------- |
|
||||
| change | 每一页轮播结束后触发 | index, 当前页的索引 |
|
||||
|
||||
### SwipeItem Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ---------- | -------------- |
|
||||
| click | 点击时触发 | _event: Event_ |
|
||||
|
||||
### Swipe 方法
|
||||
|
||||
通过 ref 可以获取到 Swipe 实例并调用实例方法,详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| --- | --- | --- | --- |
|
||||
| prev `v2.4.2` | 切换到上一轮播 | - | - |
|
||||
| next `v2.4.2` | 切换到下一轮播 | - | - |
|
||||
| swipeTo | 切换到指定位置 | index: number, options: Options | void |
|
||||
@@ -204,15 +204,15 @@ export default {
|
||||
|
||||
### swipeTo Options 格式
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
|------|------|------|
|
||||
| immediate | 是否跳过动画 | *boolean* |
|
||||
| 名称 | 说明 | 类型 |
|
||||
| --------- | ------------ | --------- |
|
||||
| immediate | 是否跳过动画 | _boolean_ |
|
||||
|
||||
### Swipe Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 轮播内容 |
|
||||
| 名称 | 说明 |
|
||||
| --------- | ------------ |
|
||||
| default | 轮播内容 |
|
||||
| indicator | 自定义指示器 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
Reference in New Issue
Block a user