首页 > 其他 > 详细

ListArea组件的使用,实现表格每项向上滚动

时间:2020-09-16 14:44:19      阅读:48      评论:0      收藏:0      [点我收藏+]

这是个类似表格的布局,数据超出屏幕条数,因此需要每秒向上滚动一格。

技术分享图片

 

使用:

表头渲染:

<div className={s.head}>
  {
    structure.map(si =>
      <div key={si.key} className={s.col} style={{width:si.width}}>
        {si.name}
      </div>,
    )
  }
</div>

structure是定义的表头state

定义state-structure:

structure: [
  {
    name: ‘单位‘,
    width: ‘50%‘,
    key: ‘dw‘,
    ),
  }, {
    name: ‘问题‘,
    width: ‘50%‘,
    key: ‘wt‘,
    formatter: (l, i) =>(
    <span className={s.itemCol}>
      {l.wt}
    </span>
    ),
  },
]
width最好正好加起来是100%,formatter是自定义的单元格渲染
<ListArea
    className={s.body}
    isSuspend={true}
    contentCount={this.lxNum}
    list={list}
    item={(l, i, ref, currentIndex) =>
      <div key={i} ref={ref} className={s.row}>
        <div className={s.rowHead}>
          {
            structure.map(si =>
              <div key={si.key} className={s.col} style={{width:si.width,}}>
                {si.formatter ? si.formatter(l, i) : l[si.key]}
              </div>,
            )
          }
        </div>
      </div>
    }
/>
isSuspend表示是否滚动,contentCount表示数据量有多少条时进行滚动,list为需要展示的表的数据。item是表的每一行的dom。
若要根据条数判断少于n条时继续轮播,总数据小于n条时isSuspend设置为false。进行不轮播。
 

ListArea组件实现>>

 

ListArea组件的使用,实现表格每项向上滚动

原文:https://www.cnblogs.com/wuhairui/p/13678578.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!