From 2bd597ecfde026c25bb34b664b3ee7075059353e Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 31 Oct 2020 08:30:39 +0800 Subject: [PATCH] docs(Swipe): add resize faq (#7459) --- src/swipe/README.zh-CN.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index ad78882ca..e0e80ccb0 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -234,3 +234,28 @@ export default { ### Swipe 组件功能太少,无法实现复杂效果? Vant 中的 Swipe 组件是比较轻量的,因此功能也比较基础。如果需要更复杂的轮播效果,推荐使用社区里一些优质的轮播库,比如 [vue-awesome-swiper](https://github.com/surmon-china/vue-awesome-swiper)。 + +### 组件从隐藏状态切换到显示状态时,无法正确渲染? + +Swipe 组件在挂载时,会获取自身的宽度,并计算出轮播图的位置。如果组件一开始处于隐藏状态,则获取到的宽度永远为 0,因此无法正确计算位置。 + +#### 解决方法 + +方法一,如果是使用 `v-show` 来控制组件展示的,则替换为 `v-if` 即可解决此问题: + +```html + + + + +``` + +方法二,调用组件的 resize 方法来主动触发重绘: + +```html + +``` + +```js +this.$refs.swipe.resize(); +```