Slide.jsx 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import React, { Component } from 'react';
  2. import { Carousel, WingBlank } from 'antd-mobile';
  3. import './Slide.css'
  4. class Slide extends React.Component {
  5. constructor(props){
  6. super(props)
  7. this.state = {
  8. imgHeight: 176
  9. }
  10. }
  11. render() {
  12. return (
  13. <WingBlank>
  14. <Carousel
  15. autoplay={true}
  16. infinite
  17. slideWidth={1}
  18. beforeChange={(from, to) => {}}
  19. afterChange={index => {}}
  20. >
  21. {this.props.slide.map(item => (
  22. <a
  23. key={item.toString()}
  24. href="http://www.alipay.com"
  25. style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
  26. >
  27. <img
  28. src={item.img}
  29. alt=""
  30. style={{ width: '100%', verticalAlign: 'top' }}
  31. onLoad={() => {
  32. // fire window resize event to change height
  33. window.dispatchEvent(new Event('resize'));
  34. this.setState({ imgHeight: 'auto' });
  35. }}
  36. />
  37. </a>
  38. ))}
  39. </Carousel>
  40. </WingBlank>
  41. );
  42. }
  43. }
  44. export default Slide