2020-12-30

king

2020-12-30 e003a8ee8843aa60b0b7135f413b2b99857acff9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, {Component} from 'react'
import { Carousel } from 'antd-mobile'
import Mp4 from '@/assets/video/testvideo.mp4'
 
import './index.scss'
 
class CarList1 extends Component {
  state = {
    data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
    imgHeight: 176,
  }
  componentDidMount() {
    // simulate img loading
    // setTimeout(() => {
    //   this.setState({
    //     data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
    //   });
    // }, 100);
  }
 
  render() {
    return (
      <Carousel
        autoplay={false}
        infinite
        // beforeChange={(from, to) => }
        // afterChange={index => }
      >
        {this.state.data.map(val => (
          <span
            key={val}
            // href="http://www.alipay.com"
            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
          >
            {val !== 'AiyWuByWklrrUDlFignR' ? <img
              src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top', marginBottom: '3vw' }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event('resize'));
                this.setState({ imgHeight: 'auto' });
              }}
            /> : null}
            {val === 'AiyWuByWklrrUDlFignR' ?
              <video src={Mp4} controls="controls" style={{ width: '100%', height: 'auto', verticalAlign: 'top' }}>
                your browser does not support the video tag
              </video> : null
            }
          </span>
        ))}
      </Carousel>
    )
  }
}
 
export default CarList1