项目中，图片是通过QQ音乐的接口获得的（jsonp）,并且在轮播图组件中使用插槽，在具体使用轮播图的组件中对slot进行填充，而后在轮播图组件中判断所作出的设置对图片的样式进行设置，通过添加类名的方式。而问题的根源在于，图片的加载是异步的，在进行DOM操作时，图片还未加载成功，所以获取不到图片们的父组件的子节点，读取为undefined，无法添加类名。图片加载成功后，这些DOM节点并未按预计添加样式，导致了异常样式的出现。
在使用轮播图组件的父组件中，为轮播图组件设置v-if，判断图片加载成功后再使用该组件，此时slot中节点已经可以获取，成功添加类名。
原本出错是由于添加v-if的结点错误，在slot处填充的结点上添加v-if，此时即使图片没有加载，读取子节点依旧为undefined，并且v-if判断为true时并不会重复触发addClass函数。
而加上一句输出后可以实现是因为修改了函数，热更新，此时图片是读取缓存中的，执行函数时图片已经加载完毕，所以可以实现类名的添加。
一、问题描述 项目中，图片是通过QQ音乐的接口获得的（jsonp）,并且在轮播图组件中使用插槽，在具体使用轮播图的...
不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。 轮播图的基本样式和...
样式 轮播图
一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图
TKCarouselView TKCarouselView 是一款功能丰富轮播图，支持京东、天猫等app样式。 T...
焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。
什么是轮播图呢？能够实现多张图片循环出现效果的我们称之为轮播图。 html样式 css样式 js样式 这就是我敲出...
实现轮播图 HTML： css样式 body {...
这个无缝轮播图比之前而言，加入了可随意在CSS样式中修改轮播图大小，JS中无需手动修改。 css样式： html代...
全屏轮播图step1HTML CSS样式
本文标题：2018-11-02 轮播图样式异常-音乐APP
本文链接：https://www.haomeiwen.com/subject/nylcxqtx.html
网友评论