【工作中踩坑之cube-ui中的cube-scroll组件无法滑动到底部的问题】

---

问题起因

起因是最近接手的一个项目迭代了一个需求的新页面，要求根据后台的数据加载出餐厅的餐单，结果渲染之后问题来了，测试的时候发现经常会滚动不到页面最底下

大概情况如下图

问题排查

1.首先排查是不是cube-scroll组件使用的方式问题

身为嘴硬的程序猿，发现错误的第一时间，要想：是不是组件有问题，而不是想：是不是我有问题。接着就检查了一遍cube-ui的文档实例发现引入和使用的没什么错误（顺便吐槽cube-ui用的人真的好少，对后期的百度造成了极大的困难）

2.检查CSS样式写的有没有问题

因为在官方文档看到了这么一句话

大概意思就是你想让他滚动起来，首先要给他设置一个高度，只是经过检查CSS只有，发现高度其实也设置过了，所以排除这个原因。

2.继续看文档，并善用百度解决问题

scroll的第一行就表示：滚动列表，提供了优质的原生滚动体验，便捷的配置项和事件，是一个基于better-scroll进行封装的组件。

这句话引起了我的注意，虽然cube-ui用的人很少，但是这个better-scroll用到的人一定很多，有人用就一定也有人碰到这个问题，二话不说直接百度。
经过百度之后，这个大佬的帖子引起了我的注意:大概就是说：在vue中的内容页中，总是会出现内容页的滚动高度不够问题，原因其实就是better-scroll的初始化时图片还没下载完。所以计算的是当时dom元素的高度。找到原因后解决方案也就好说了。
附上大佬文章地址：vue中使用better-scroll内容页的高度计算问题

---

看了一下，我的文件里确实是引用到了几个图片，至于怎么验证大佬说的是对的，一试便知 把页面里的图片display: none;掉。接着向下滚动，发现可以滚动到底部了，问题解决！！！

总结

如果你的页面里使用到了图片的话，那么scroll会在计算dom高度的时候不带上图片，所以导致它的高度不正确。这是我们只需要在图片外面套一层DIV，给一个高度就可以解决这个问题了

    .breakfast {
        background-color: #EFFFE5;
        width: 100%
        height: 3.7rem;

        img {
            width: 100%
        }
    }