关于Vue中使用better-scroll 时加载图片的问题

Question

问题介绍

我在vue中使用better-scroll插件时，加载图片发现不能正常地滚动，在网上寻找答案发现大多数人是通过图片加载完成之后调用scroll的refresh方法重新计算高度解决问题，但是我refresh之后仍然不能解决图片错位的问题。

代码展示

我在做一个小项目的时候，为了实现滚动调用了better-scroll插件，封装成了一个Scroll.vue组件。

// Scroll.vue
<template>
  <div class="warpper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "Scroll",
  props: {
    probeType: {
      type: Number,
      default: 3
    },
    pullUpLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scroll: null
    };
  },
  mounted() {
    // 创建BScroll 对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true,
      probeType: this.probeType,
      pullUpLoad: this.pullUpLoad
    });
  }，
  methods: {
    refresh() {
      this.scroll && this.scroll.refresh();
    },
  }
</script>

然后在Detail.vue中使用了Scroll组件,将一些子组件传入了Scroll的插槽：

// Detail.vue
<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav"></detail-nav-bar>
    <scroll class="detail-content" ref="scroll">
      <detail-swiper :top-images="topImages" />
      <Detail-base-info :goods="goods" />
      <detail-shop-info :shop="shop" />
      <detail-goods-info
        :detail-info="detailInfo"
        @detailImageLoad="detailImageLoad"
      />
      <detail-param-info :param-info="paramInfo" />
      <detail-comment-info :comment-info="commentInfo" />
      <goods-list :goods="recommends" />
    </scroll>
  </div>
</template>

<script>
// ...
  methods: {
    detailImageLoad() {
      this.$refs.scroll.refresh();
    }
  }
// ...
</script>

其中DetailGoodsInfo组件是用来显示一组图片的子组件：

// DetailGoodsInfo.vue
<template>
  <div v-if="Object.keys(detailInfo).length !== 0" class="goods-info">
    <div class="info-desc clear-fix">
      <div class="start"></div>
      <div class="desc">{{ detailInfo.desc }}</div>
      <div class="end"></div>
    </div>
    <div class="info-key">{{ detailInfo.detailImage[0].key }}</div>
    <div class="info-list">
      <img
        v-for="(item, index) in detailInfo.detailImage[0].list"
        :key="index"
        :src="item"
        alt=""
        @load="detailImageLoad"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailGoodsInfo",
  props: {
    detailInfo: {
      type: Object
    }
  },
  methods: {
    detailImageLoad() {
      this.$emit("detailImageLoad");
    }
  }
};
</script>

问题描述

从DetailGoodsInfo代码可以看到我在每一张图片加载完成之后通过事件触发父组件scroll的refresh方法重新计算滚动高度，理论上应该能够正常滚动了，但是仍然有bug：

可以看到DetailGoodsInfo跑到了最后面，并且是其他组件叠放在了DetailGoodsInfo上面：

并且如果DetailGoodsInfo图片比较多的话，会直接顶到页面头部，把最前面的轮播图给覆盖了，就好像是图片是从底部往上开始加载的。

改了两天的bug还是没有找出来问题出在哪里，希望有大佬能点拨点拨，感激不尽??

Answer 1

等待大神解答