topscroll.js

import React, {Component} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
export default class Topscroll extends Component {
    state = {
        slideIndex:0
    }

    render() {
        return (
           <div className='top-scroll'>
               <WingBlank>
                   <Carousel className="space-carousel"
                             frameOverflow="visible"
                             cellSpacing={10}
                             slideWidth={0.8}
                             autoplay
                             infinite
                             dotActiveStyle={{
                                 width: '18px',
                                 height: '8px',
                                 background: '#fff',
                                 borderRadius: '4px',
                             }}
                             afterChange={index => this.setState({ slideIndex: index })}
                   >
                       {this.props.data.map((val, index) => (
                           <a
                               key={val}
                               href="http://www.alipay.com"
                               style={{
                                   display: 'block',
                                   position: 'relative',
                                   top: this.state.slideIndex === index ? -6 : 0,
                                   height: this.state.slideIndex === index ? this.props.actheight : this.props.height,
                               }}
                           >
                               <img
                                   src={val.src}
                                   alt=""
                                   style={{ width: '100%', verticalAlign: 'top', height: '100%' }}
                                   onLoad={() => {
                                       // fire window resize event to change height
                                       window.dispatchEvent(new Event('resize'));
                                       // this.setState({ imgHeight: 'auto' });
                                   }}
                               />
                           </a>
                       ))}
                   </Carousel>
               </WingBlank>
           </div>
        );
    }
}