Merge branch '2.x' into dev
This commit is contained in:
+2
-2
@@ -195,8 +195,8 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Swipe
|
||||
| --- | --- | --- | --- |
|
||||
| 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 |
|
||||
| resize | Resize Swipe when container element resized | - | void |
|
||||
| swipeTo | Swipe to target index | index: target index, options: Options | - |
|
||||
| resize | Resize Swipe when container element resized or visibility changed | - | - |
|
||||
|
||||
### swipeTo Options
|
||||
|
||||
|
||||
@@ -199,14 +199,14 @@ export default {
|
||||
|
||||
### Swipe 方法
|
||||
|
||||
通过 ref 可以获取到 Swipe 实例并调用实例方法,详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。。
|
||||
通过 ref 可以获取到 Swipe 实例并调用实例方法,详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
| prev `v2.4.2` | 切换到上一轮播 | - | - |
|
||||
| next `v2.4.2` | 切换到下一轮播 | - | - |
|
||||
| swipeTo | 切换到指定位置 | index: number, options: Options | void |
|
||||
| resize | 外层元素大小变化后,可以调用此方法来触发重绘 | - | void |
|
||||
| swipeTo | 切换到指定位置 | index: number, options: Options | - |
|
||||
| resize | 外层元素大小或组件显示状态变化时,可以调用此方法来触发重绘 | - | - |
|
||||
|
||||
### swipeTo Options 格式
|
||||
|
||||
@@ -236,3 +236,28 @@ export default {
|
||||
### Swipe 组件功能太少,无法实现复杂效果?
|
||||
|
||||
Vant 中的 Swipe 组件是比较轻量的,因此功能也比较基础。如果需要更复杂的轮播效果,推荐使用社区里一些优质的轮播库,比如 [vue-awesome-swiper](https://github.com/surmon-china/vue-awesome-swiper)。
|
||||
|
||||
### 组件从隐藏状态切换到显示状态时,无法正确渲染?
|
||||
|
||||
Swipe 组件在挂载时,会获取自身的宽度,并计算出轮播图的位置。如果组件一开始处于隐藏状态,则获取到的宽度永远为 0,因此无法正确计算位置。
|
||||
|
||||
#### 解决方法
|
||||
|
||||
方法一,如果是使用 `v-show` 来控制组件展示的,则替换为 `v-if` 即可解决此问题:
|
||||
|
||||
```html
|
||||
<!-- Before -->
|
||||
<van-swipe v-show="show" />
|
||||
<!-- After -->
|
||||
<van-swipe v-if="show" />
|
||||
```
|
||||
|
||||
方法二,调用组件的 resize 方法来主动触发重绘:
|
||||
|
||||
```html
|
||||
<van-swipe v-show="show" ref="swipe" />
|
||||
```
|
||||
|
||||
```js
|
||||
this.$refs.swipe.resize();
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user