Author

你们的吴男神

lists-scroll

滚动列表

install

npm install --save lists-scroll

usage

import { Row, Col, List } from 'antd';
import React, { memo, useEffect, useState, useRef } 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].warning);
  const loading = useSelector((state: GPageProps) => state.loading).effects[`${namespace}/warning`];
  const listRef = useRef<any>(null)

  useEffect(()=>{
    // 组件初始化
    const listOpts = listRef.current
    if (listOpts) {
      listOpts.loading = loading;
      listOpts.forceUpdate();
    }
  },[loading])


  useEffect(() => {
    const listOpts = listRef.current
    if (listOpts?.list.length === 0 && warning?.length) {
      listOpts.list = warning
      listOpts.timer = 2 * 1000;
      listOpts.startScrollUp();
      listOpts.forceUpdate();
    }
  }, [warning]);

  /**
   * @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) => { listRef.current = ref}} renderView={renderView} />
        </div>
      </div>
    </div>
  );
};
export default memo(Page);

Preview