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