当组合使用antd-mobile的Tabs 和 ListView的时候,上拉的时候让本该固定的Tabs被隐藏

当组合使用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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。