Prolist组件实现动态竖排展示

实现原理:主要是利用外层div属性display:"flex",overflowX: 'auto',配合内层prolist样式属性flex:"0 0 auto",overflowX:"auto",width:"350px",height:900,实现动态竖排展示

复制代码
<div style={{display:"flex",overflowX: 'auto',width:"100%"}}>
  {lists && lists.map((item,index)=>{
    console.log("item",item)
    return(
      <ProList
        style={{flex:"0 0 auto",overflowX:"auto",width:"350px",height:900}}
        headerTitle={item.keyword_name}
        metas={{
          title:{
            dataIndex:"commenter_name"
          },
          avatar:{
            dataIndex:"avatar_url"
          },
          description:{
            dataIndex:"content"
          }
        }}
        request={async ()=>{
          const params = {keyword_name:item.keyword_name}
          const res = await get_cars(params)
          return {
            success:true,
            data:res.data
          }
        }}
      />
    )
  })}
</div>
相关推荐
PleaSure乐事6 天前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
PleaSure乐事15 天前
Ant-Dseign-Pro如何去国际化及删除oneapi.json后出现程序直接结束问题的解决方案
前端·javascript·react.js·前端框架·json·oneapi·antdesignpro