最近在使用react重构一个老项目，其中使用的better-scroll作为页面滚动插件。
在普通的列表页面上使用时，一切正常，但是在自己写的一个弹出框样式的列表页面中使用better-scroll时，发现初始化后没法滚动。网上常见的几种原因逐一排查：
-
wrapper设置固定高度，样式加上overflow: hidden；
-
wrapper中滚动部分需要用一个div包裹起来；
-
wrapper中滚动部分的高度要大于wrapper的高度；
-
wrapper中滚动部分内容改变后要调用refresh刷新一下，重新计算滚动部分的高度；
最终排查发现是上述第四条的原因，比较刁钻，这里记录一下：
refresh方法我在更新列表数据之后是加过了的，但是由于这个弹框样式的列表页面在数据请求结束时，是处于隐藏状态的，即有样式display:none。这个时候我去refresh,实际上列表中滚动部分的高度是按照0px来计算的，等我把弹框展示出来后，当然无法滚动了。
也就是说，更新滚动部分内容时，要保证wrapper处于可见状态，然后再去refresh,这样才能保证数据更新后,滚动部分的高度计算是正确的。
这里我的项目中只要把refresh的调用时机从“更新数据时”改为“弹出页面时”即可。
网友评论