antd Mobile Tabs 垂直布局后台传入数据

最近两周在研究react 相关项目，react 相关的 UI插件中，antd 算是比较好的一种，所以这里就用antd mobile 开发一个移动端项目。具体react 知识点就不赘述了。这里主要讲遇到的 tabs 问题。

有一块是新闻列表模块。但是用长列表做完以后发现，这个布局效果不理想，为什么就不能像头条一样布局呢？

虽然只是运用Tabs 和布局相关的知识，但是实际操作并没有像API 里说的那样简单。

首先在 antd mobile 里面可以发现有基本用法、无动画、垂直、自定义等各种说明。所以这里要想实现上述效果，要将垂直布局和自定义属性结合。

 <Tabstabs={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: '#fff' }}><p>Content of {tab.title}</p></div>);

这个函数其实就是对右侧内容进行渲染。

这里先对API 中给出的示例进行测试，看看这里到底会出现哪些结果。

这里可以看到其实在Tabs 初始化时，会先加载前两个tab 下的内容，以便切换tab 时，会出现一个缓冲的滑动效果。等到点击第二个 Tab 时，又重新渲染第二和第三块内容，以此类推。

放到实际运用中可以看到，会先传入tab 的id 属性

那这样根据id 做 ajax 调用不就可以了。但是发现，每次ajax 请求回来的数据渲染到h5 对象后，根本传不回来。也就是不能根据id 进行异步请求数据。所以换了一种思路，我想单纯只是用tab 而已，他右侧的内容区域用Flex 布局做成普通形式的异步请求，但是又发现

Tab 右侧内容区是自带的，并不能被人为消除，也就是2 区域所示的留白区会一直存在，且自适应大小。所以这里还是没办法要解决异步问题。

翻阅官方文档 https://www.jianshu.com/go-wild?ac=2&url=https%3A%2F%2Ffacebook.github.io%2Freact%2Ftips%2Finitial-ajax.html

要运用ajax 请求，还是要先在 componentDidMount（）中请求ajax 数据，封装到state 当中，每次点击不同tab 时再有针对性的从 state 中获取。下面给出源码示例。

componentDidMount(){this.getTabs();this.getNews();
}
getNews=()=>{axios({url:`http://localhost:3000/news?_page=1&_limit=25`,method:'get',async:false}).then(res=>{console.log(res.data);//var temp=this.renderRow(res.data);//this.setState({news:res.data})});
}
getTabs=()=>{axios({url:`http://localhost:3000/newsKind`,method:'get'}).then(res=>{this.setState ({tabs:[...res.data],totalPage:[...res.data].length});})
}render(){let mineStyle={height:document.documentElement.clientHeight-95,overflow:'auto',backgrounColor:'yellow'}return (<div >{/* 导航栏 */}<NavBar  mode="dark" icon={<Icon type="left" />}onLeftClick={() =>{this.backGoing()}}rightContent={[<Icon key="0" type="search" style={{ marginRight: '16px' }} />,<Icon key="1" type="ellipsis" />,]}>热点新闻</NavBar><div  style={mineStyle}><Tabstabs={this.state.tabs}tabBarPosition="left"tabDirection="vertical"initalPage={'t2'}>{this.renderContent}</Tabs></div></div>)
}
renderContent = tab =>(<div style={{backgroundColor: '#fff' }}>{this.renderRow(tab.id)}</div>);
renderRow=(index)=>{var jsxTemp=[];var linkStyle={display:'block'}this.state.news.forEach((val,ind)=>{if(index*this.state.totalPage<=ind && ind <this.state.totalPage*(index+1)){var newUrl=`/newDetail/${val.id}`;jsxTemp.push(<NavLink to={newUrl} key={val.id} style={linkStyle}><div  style={{ padding: '0 15px' }}><div style={{lineHeight: '50px',color: '#000',fontSize: 18,borderBottom: '1px solid #F6F6F6',}}>{val.title}</div><div style={{ display: '-webkit-box', display: 'flex', padding: '15px 0' }}><img style={{ height: '64px', marginRight: '15px' }} src={val.newImg} alt="" /><div style={{ lineHeight: 1 }}><div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{val.text}</div><div><span style={{ fontSize: '16px', color: '#FF6E27' }}>{val.author}</span></div></div></div></div></NavLink>)}});return jsxTemp;
}

不过这里也有弊端，单次请求数据量会很大，不符合按需加载原则。希望之后对react 更了解之后再进一步改进。下面是最后的效果图：

antd Mobile Tabs 垂直布局后台传入数据相关推荐

关于antd table组件中，数据渲染条数跟后台传入数据不一致的问题
如果出现表格数据渲染跟后台传过来的数据的条数不一致的情况,绝大概率的rowkey的问题. 我这边当时调试的时候,后台的数据我是存在store中的,包括在table重新渲染的时候,我这边传过来的数据 ...
JSP中枚举的遍历和Jquery填充后台传入数据
本菜鸟是新的不能再新的菜鸟了,菜鸟作为实习生进来一家公司上班,两眼一抹黑,只是把自己学到的觉得有用的写下来. 项目背景:Spring+Spring mvc+MyBatis JSP中将枚举遍历显示 1. ...
电商后台、手机端、小程序、H5、电商原型、需求池、产品结构图、接口流程、高保真交互、PRD、布局说明、数据统计、店铺管理、商品管理、财务管理、售后、订单、会员、客服、标签、Axure原型、产品原型
电商后台.手机端.小程序.H5.电商原型.需求池.产品结构图.接口流程.高保真交互.PRD.布局说明.数据统计.店铺管理.商品管理.财务管理.售后.订单.会员.客服.标签.Axure原型.产品原型.h ...
前台传入数据，在后台servelet中接收的，强硬解决乱码格式
前台传入数据,在后台servelet中接收的,强硬解决乱码格式 String date = request.getParameter("date");System.out.prin ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
vuex+element 从后台获取数据写导航栏-菜单权限
主要用到 vuex.router.beforeEach.router.addRoutes().vuex 的使用方法可以看我的另一篇博客:vue笔记(四)vuex. 顺便安利一个在线视频转gif图. ...
解决后台json数据返回的字段需要替换的问题
有时候后台json数据返回的字段含有"id",也有可能是有时候为了减少代码的冗余,两页面之间只是数据模型个别属性的区别,所以这时候最好是用到模型属性的替换,用新的属性替换返回的js ...
JQuery通过后台获取数据遍历到前台
做项目中,经常会通过调用后台接口把数据显示到前台页面上来,之前遇到过的问题是,前台页面是用ul+li标签写的,在调用接口调试时发现返回的数据有很多组的,而在前台显示的时候只有一条数据,毋容置疑,一定是 ...
垂直布局的HTML表单
对于比较复杂的表单,要填写的内容相对较多,采用水平布局显然不合适.因此,垂直布局的表单更加常用.垂直对齐的表单中,标签和输入框可以使用三种对齐方式,包括顶对齐.左对齐和右对齐. 顶对齐可以缩短用户填写 ...

antd Mobile Tabs 垂直布局后台传入数据

antd Mobile Tabs 垂直布局后台传入数据相关推荐

最新文章

热门文章

antd Mobile Tabs 垂直布局 后台传入数据

antd Mobile Tabs 垂直布局 后台传入数据相关推荐

最新文章

热门文章

antd Mobile Tabs 垂直布局后台传入数据

antd Mobile Tabs 垂直布局后台传入数据相关推荐