当组合使用antd-mobile的Tabs 和 ListView的时候,发现ReactDOM.findDOMNode(ref.current).offsetTop查找ListView该dom节点的offsetTop为0,导致上拉的时候让本该固定的Tabs却被隐藏掉了,如下
const hei = height - ReactDOM.findDOMNode(ref.current).offsetTop;
<Tabs onChange={(tab, index) => { changeTabs(tab, index); }} tabs={tabs} tabBarUnderlineStyle={{ borderBottomWidth: 0.7, borderBottomColor: '#004CDF', width: '10%', textAlign: 'center', left: '5%' }} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={5} />}>
<ListView
key={useBodyScroll ? '0' : '1'}
ref={ref}
dataSource={dataSource}
// renderHeader={() => <span>Pull to refresh</span>}
renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
{isLoading ? 'Loading...' : 'Loaded'}
</div>)}
renderRow={row}
// renderSeparator={separator}
useBodyScroll={useBodyScroll}
style={useBodyScroll ? {} : {
height: height,
border: '1px solid #ddd',
margin: '5px 0',
}}
pullToRefresh={<PullToRefresh
refreshing={refreshing}
onRefresh={onRefresh}
/>}
onEndReached={onEndReached}
pageSize={5}
/>
</Tabs>
解决方法:官方组件的问题,子panel没有offsetTop高度,目前折中的方法是,给Tabs一个设定的高度,然后写死ListView的ReactDOM.findDOMNode(ref.current).offsetTop为50
#{"/deep/"} .am-tabs-tab-bar-wrap{
box-sizing: border-box;
position: relative;
height: 50px;
line-height: 50px;
}
const hei = height - 50
然后问题就解决了
github相关问题传送门:https://github.com/chendishen/bugList