2018-11-02 轮播图样式异常-音乐APP

一、问题描述

项目中，图片是通过QQ音乐的接口获得的（jsonp）,并且在轮播图组件中使用插槽，在具体使用轮播图的组件中对slot进行填充，而后在轮播图组件中判断所作出的设置对图片的样式进行设置，通过添加类名的方式。而问题的根源在于，图片的加载是异步的，在进行DOM操作时，图片还未加载成功，所以获取不到图片们的父组件的子节点，读取为undefined，无法添加类名。图片加载成功后，这些DOM节点并未按预计添加样式，导致了异常样式的出现。

二、解决思路

在使用轮播图组件的父组件中，为轮播图组件设置v-if，判断图片加载成功后再使用该组件，此时slot中节点已经可以获取，成功添加类名。
原本出错是由于添加v-if的结点错误，在slot处填充的结点上添加v-if，此时即使图片没有加载，读取子节点依旧为undefined，并且v-if判断为true时并不会重复触发addClass函数。
而加上一句输出后可以实现是因为修改了函数，热更新，此时图片是读取缓存中的，执行函数时图片已经加载完毕，所以可以实现类名的添加。