PerfectScrollbar 滚动轮播

import styles from './keywordEvolution.scss';
import React, { PureComponent } from 'react';
import { Spin } from 'antd';
import PerfectScrollbar from 'react-perfect-scrollbar';
import 'react-perfect-scrollbar/dist/css/styles.css';
import Empty from 'common/empty/Empty';

import { getKeywordEvolution } from 'services/creditRecognition/hotword';

export default class KeywordEvolution extends PureComponent {
    state = {
        keywords: [],
        loading: true
    }

    componentDidMount () {
        getKeywordEvolution().then(res => {
            this.setState({
                keywords: res || [],
                loading: false
            });
        }).catch(error => {
            this.setState({ loading: false });
        });
    }
    render () {
        const { keywords, loading } = this.state;
        return (
            <div className="itemContent">
                <h3 className="head">关键特征词演变</h3>
                <Spin spinning={loading}>
                    <div className={styles.scrollKeywords}>
                        <div className="content">
                            {
                                keywords.map(keyword => <div className="col" key={keyword.date}>
                                    <PerfectScrollbar>
                                        <ul className="scrollList">
                                            {keyword.keywordEvolution.length ? keyword.keywordEvolution.map(item => <li key={item.featuresWord} title={item.featuresWord} key={item.featuresWord}>{item.featuresWord}</li>) : <Empty type="simple" />}
                                        </ul>
                                    </PerfectScrollbar>
                                </div>)
                            }
                        </div>
                        <ul className="date">
                            {
                                keywords.map(item => <li className="col" key={item.date}>{item.date}</li>)
                            }
                        </ul>
                    </div>
                </Spin>
            </div>
        );
    }
}