Question

我在汽车销售网站上工作并使用vue-router。

我有一个索引页面，其中列出了所有待售汽车，然后点击它们链接到该特定车辆的单一视图。

我有一个很大的标题＆＃39;单个视图页面上的图像，并将其放在具有固定高度的容器内，以便在页面加载时不会跳到页面高度。

当进入这个单一视图时，我会进行API调用以获取车辆数据，然后希望淡入标题图像。

要做到这一点：

 <div class="singleVehicle__mainImage">
     <span :style="styles" :class="{'imageLoaded' : mainImageLoaded }" v-if="vehicle"></span>
 </div>

 export default {
    data() {
        return {
            vehicle: null,
            styles: {
                backgroundImage: null
            },
            mainImageLoaded: null
        }
    },
    created() {
        this.getVehicle().then(() => {
            this.mainImageBackground();
        });
    },
    methods: {
        mainImageBackground() {
            var source = "IMAGE SOURCE URL";
            this.styles.backgroundImage = "url("+source+")";

            var $this = this;
            var img = new Image();
            img.onload = function() {
                $this.mainImageLoaded = true;
            }
            img.src = source;
            if (img.complete) img.onload();
        }
    }
}

默认情况下，图像包装中的范围具有0不透明度，然后在添加.imageLoaded类时转换为1.

这很好，但只是每辆车第一次装载。图像等待直到它加载然后淡入。之后每隔一段时间，图像只会在加载时弹出，就像imageLoaded类没有被重置/数据在离开视图时没有被重置一样。

清除浏览器缓存时，它会再次工作，但每个车辆视图一次。

Answer 1

这可能是由于您的v-if="vehicle"。车辆通话可能需要更长的时间，因此在添加课程或与此相关的时间问题之后，范围才会显示。

vue-router视图缓存/不重置数据

1 个答案: