blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-25 10:56:35 +08:00
Code Issues Projects Releases Wiki Activity

docs(Swipe): add faq (#6688)

Browse Source
This commit is contained in:
neverland 2020-07-03 14:22:06 +08:00 committed by GitHub
parent b5d88cbe4a
commit 9e0400260f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/swipe/README.md
View File

@ -14,7 +14,7 @@ Vue.use(SwipeItem);
### Basic Usage ### Basic Usage
Use `autoplay` prop to set autoplay interval Use `autoplay` prop to set autoplay interval.
```html ```html
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
@ -37,7 +37,7 @@ Use `autoplay` prop to set autoplay interval
### Image Lazyload ### Image Lazyload
Use [Lazyload](#/en-US/lazyload) component to lazyload image Use [Lazyload](#/en-US/lazyload) component to lazyload image.
```html ```html
<van-swipe> <van-swipe>
@ -110,7 +110,7 @@ export default {
</van-swipe> </van-swipe>
``` ```
> It's not supported to set SwipeItem size in the loop mode > It's not supported to set SwipeItem size in the loop mode.
### Custom Indicator ### Custom Indicator
@ -187,7 +187,7 @@ export default {
### Swipe Methods ### Swipe Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods.
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
| --- | --- | --- | --- | | --- | --- | --- | --- |

18
src/swipe/README.zh-CN.md
View File

@ -14,7 +14,7 @@ Vue.use(SwipeItem);
### 基础用法 ### 基础用法
每个 SwipeItem 代表一张轮播卡片，可以通过`autoplay`属性设置自动轮播的间隔 每个 SwipeItem 代表一张轮播卡片，可以通过 `autoplay` 属性设置自动轮播的间隔。
```html ```html
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
@ -37,7 +37,7 @@ Vue.use(SwipeItem);
### 图片懒加载 ### 图片懒加载
当 Swipe 中含有图片时，可以配合 [Lazyload](#/zh-CN/lazyload) 组件实现图片懒加载 当 Swipe 中含有图片时，可以配合 [Lazyload](#/zh-CN/lazyload) 组件实现图片懒加载。
```html ```html
<van-swipe :autoplay="3000"> <van-swipe :autoplay="3000">
@ -90,7 +90,7 @@ export default {
### 纵向滚动 ### 纵向滚动
设置`vertical`属性后滑块会纵向排列，此时需要指定滑块容器的高度 设置 `vertical` 属性后滑块会纵向排列，此时需要指定滑块容器的高度。
```html ```html
<van-swipe style="height: 200px;" vertical> <van-swipe style="height: 200px;" vertical>
@ -103,7 +103,7 @@ export default {
### 自定义滑块大小 ### 自定义滑块大小
滑块默认宽度为`100%`，可以通过`width`属性设置单个滑块的宽度。纵向滚动模式下，可以通过`height`属性设置单个滑块的高度。 滑块默认宽度为 `100%`，可以通过 `width` 属性设置单个滑块的宽度。纵向滚动模式下，可以通过 `height` 属性设置单个滑块的高度。
```html ```html
<van-swipe :loop="false" :width="300"> <van-swipe :loop="false" :width="300">
@ -114,11 +114,11 @@ export default {
</van-swipe> </van-swipe>
``` ```
> 目前不支持在循环滚动模式下自定义滑块大小，因此需要将 loop 设置为 false > 目前不支持在循环滚动模式下自定义滑块大小，因此需要将 loop 设置为 false。
### 自定义指示器 ### 自定义指示器
通过`indicator`插槽可以自定义指示器的样式 通过 `indicator` 插槽可以自定义指示器的样式。
```html ```html
<van-swipe @change="onChange"> <van-swipe @change="onChange">
@ -193,7 +193,7 @@ export default {
### Swipe 方法 ### Swipe 方法
通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -226,3 +226,7 @@ export default {
### 在桌面端无法操作组件？ ### 在桌面端无法操作组件？
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。 参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
### Swipe 组件功能太少，无法实现复杂效果？
Vant 中的 Swipe 组件是比较轻量的，因此功能也比较基础。如果需要更复杂的轮播效果，推荐使用社区里一些优质的轮播库，比如 [vue-awesome-swiper](https://github.com/surmon-china/vue-awesome-swiper)。