Author

你们的吴男神

lists-scroll

滚动列表

install

npm install --save lists-scroll

usage

import { Row, Col, List } from 'antd';
import React, { memo, useEffect, useState } from 'react';
import ListScroll from 'lists-scroll';
import { useSelector } from 'umi';
import styles from '../index.less';
import { namespace } from '../models';

/**
 * @name 重点事件预警
 */
const Page = () => {
  const { warning } = useSelector((state: GPageProps) => state[namespace]);
  const loading = useSelector((state: GPageProps) => state.loading).effects[`${namespace}/warning`];
  const [listRef, setListRef] = useState<any>(null);

  useEffect(() => {
    /**
     * @name 将子组件数据初始化
     * @param e children props
     */
    if (listRef) {
      listRef.loading = loading;
      listRef.forceUpdate();
    } else {
       return
    }
    if (listRef.list.length === 0 && warning) {
      listRef.list = warning.map((ele: any, index: number) => {
        const data = ele;
        data.index = index;
        return data;
      });
      listRef.timer = 2 * 1000;
      listRef.startScrollUp();
      listRef.forceUpdate();
    }
  });

  /**
   * @name 列表行视图
   * @param item col list
   */
  const renderView = (item: any) => {
    const { eventType, submitTime, area, disputeDescribe, index } = item;
    return (
      <List.Item key={index} style={{ border: 0, padding: '2rem 0' }}>
        <Row className={styles.scrollRow}>
          <Col span={6} title={eventType}>{eventType}</Col>
          <Col span={6} title={submitTime}>{submitTime}</Col>
          <Col span={4} title={area}>{area}</Col>
          <Col span={8} title={disputeDescribe}>{disputeDescribe}</Col>
        </Row>
      </List.Item>
    );
  };

  return (
    <div className={styles.warning}>
      <p />
      <span className={styles.title}>重点事件预警</span>
      <div className={styles.line} />
      <div className={styles.content}>
        <Row className={styles.row}>
          <Col span={6}>事件</Col>
          <Col span={6}>日期</Col>
          <Col span={6}>地区</Col>
          <Col span={6}>详情</Col>
        </Row>
        <div className={styles.scroll}>
          <ListScroll ref={(ref) => setListRef(ref)} renderView={renderView} />
        </div>
      </div>
    </div>
  );
};
export default memo(Page);

Preview