最近两周在研究react 相关项目,react 相关的 UI插件中,antd 算是比较好的一种,所以这里就用antd mobile 开发一个移动端项目。具体react 知识点就不赘述了。这里主要讲遇到的 tabs 问题。
有一块是新闻列表模块。但是用长列表做完以后发现,这个布局效果不理想,为什么就不能像头条一样布局呢?
虽然只是运用Tabs 和布局相关的知识,但是实际操作并没有像API 里说的那样简单。
首先在 antd mobile 里面可以发现有基本用法、无动画、垂直、自定义等各种说明。所以这里要想实现上述效果,要将垂直布局和自定义属性结合。
<Tabs
tabs={this.state.tabs}
tabBarPosition="left"
tabDirection="vertical"
initalPage={'t2'}
renderTabBar={props => <Tabs.DefaultTabBar {...props} page={this.state.totalPage} />}>
{this.renderContent}
</Tabs>
这里tabs 是左侧栏的标题内容,最后一项renderTabBar 是右侧内容区渲染函数,page指定当前tab 数量。当没有最后一个渲染函数时,初次不会渲染内容。剩下两个 tabBarPosition="left" 、tabDirection="vertical" 就是定义左侧标题栏的位置。
下面到了最难的地方,renderContent 。
官网给出的示例是:
renderContent = tab =>
(<div style={
{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: