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>