vue中的vant使用心得及踩坑事件:轮播组件swipe渲染的宽度为0
文章目录问题现象:轮播组件swipe渲染的宽度为0问题描述:问题分析:问题解决:问题现象:轮播组件swipe渲染的宽度为0问题描述:今天开发的时候,需要使用一个轮播图组件。由于渲染的很多数据都是接口获取的,因此我这里通过hadImageDetail字段控制是否开始渲染。而下图的代码中,hadImageDetail是从接口异步获取到的,而van-swipe却会在vue的mounted阶段就开始渲染,
·
问题现象:轮播组件swipe渲染的宽度为0
问题描述:
今天开发的时候,需要使用一个轮播图组件。
由于渲染的很多数据都是接口获取的,因此我这里通过hadImageDetail字段控制是否开始渲染。
而下图的代码中,hadImageDetail是从接口异步获取到的,而van-swipe却会在vue的mounted阶段就开始渲染,导致此时轮播图获取到的宽度为0.
如下图:
问题分析:
原因就是前面提到的,hadImageDetail字段还未从接口获取到,就渲染了van-swipe,导致van组件中的js计算出来的宽度为0。
问题解决:
知道原因后,解决办法就很简单了,通过hadImageDetail字段来同步控制vant组件的渲染即可。
刷新,看效果,OK
更多推荐
已为社区贡献24条内容
所有评论(0)