先看看 better-scroll 的滚动原理

需要 content 的高度 大于 wrapper

分析问题

而我们封装的 better-scroll 在开始渲染的时候 content 是没有内容的

就造成 content 的高度 小于 wraper

所以无法滚动

解决

通过 EventBus 并 监听 content 中图片的加载,在图片加载完成后,再调用 refresh 重新计算高度

GoodsListItem

html

<img :src="goodsItem.show.img" @load="imageLoad" alt="" />

script

methods: {
 imageLoad() {
  bus.emit("itemImageLoad");
 }
}

Home

itemImageLoad() {
      bus.on("itemImageLoad", () => {
        this.$refs.scroll.scroll.refresh();
      });
    },

但是 还是不能滚动

然后我看了看 wrapper 和 content 的高度

这两个是一样,那肯定是滚动不了的,而 wrapper 的高度是计算出来的

.content {
  height: calc(100% - 49px);
  overflow: hidden;
}

明明减去了 49px 但高度没有减掉,空格也有,起初想的是重新计算100%的问题,就想着换个100vh 就可以了 虽然问题解决了,但是还是 100% 更符合我当前的业务需求,在手机浏览器上,手机自带下面的快捷按钮,这一部分会遮挡到我的底部导航栏

就继续找,但是网上问题的原因都是 "-" 前后需要空格

问题还是没解决 2022/2/8