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

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

 

使用：

表头渲染：

<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组件实现>>