今天在使用Taro框架写小程序的时候,需要咨询页面,如下图展示
整体布局就是在Tab组件中使用ScrollView滚动组件,滚动到底部进行加载下一页。
很简单的一个页面,在微信、字节、百度都没有问题,在编译成支付宝小程序后,
(真机)发现在滚动的时候,会把顶部的Tab标题顶上去,
仔细研究发现在在这个页面出现了两个滚动条,一个是ScrollView的。另一个是Tab组件的,在每次滚动的时候可能会触发到Tab页面的滚动条,导致把标题顶上去。
问题出现在给ScrollVeiw设置高度的时候直接设置为100%,导致在滚动的时候会出现把Tab标题顶走了的问题。
只能手动获取视窗高度给ScrollView设置高度,查阅文档发现**Taro.getSystemInfoSync()**方法,获取系统信息同步接口
const systemInfo = Taro.getSystemInfoSync();
const heightStyle = { height: processData == 'alipay' ? `${systemInfo.windowHeight}px` : '100%' };
<ScrollView
className='scrollView'
scrollY
scrollWithAnimation
onScrollToLower={() => onScrollToLower()}
style={heightStyle}
></ScrollView>
手动设置ScrollView高度就可以解决了。