index.js 1.92 KB
Newer Older
FE committed
1 2 3 4 5 6 7 8
import React, { Component } from 'react';
import Swiper from 'swiper'
import './index.scss'
import 'swiper/dist/css/swiper.min.css'
import { Link } from "react-router-dom";


class Index extends Component {
zhanghaozhe committed
9 10
  container = null
  swiper = null
FE committed
11

zhanghaozhe committed
12 13 14 15 16 17 18 19 20 21 22
  componentDidMount() {
    if (this.props.bannerList.length > 1) {
      this.swiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        spaceBetween: 12,
        centeredSlides: true,
        slidesPerView: 'auto',
        loopedSlides: 3,
        autoplay: true,
      })
FE committed
23
    }
zhanghaozhe committed
24
  }
FE committed
25

zhanghaozhe committed
26
  componentWillUnmount() {
xuzhenghua committed
27
    this.swiper && this.swiper.destroy()
zhanghaozhe committed
28
  }
FE committed
29 30


zhanghaozhe committed
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 58 59 60 61 62 63 64 65 66 67 68
  render() {
    const {bannerList} = this.props
    return (
      <div className={'index-banner-swiper'}>
        <div className={'swiper-container'} ref={el => this.container = el}>
          <ul className="swiper-wrapper">
            {
              bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
                return (
                  <li className={'swiper-slide'} key={index}>
                    {
                      Number.isNaN(parseInt(item.jump_url)) ?
                        <a href={item.jump_url} key={index}>
                          <img className="item" src={item.name} alt=""/>
                        </a> :
                        <Link
                          to={{
                            pathname: '/detail',
                            search: `?id=${item.jump_url}`,
                          }}
                          key={index}
                        >
                          <img
                            className="item"
                            src={item.name}
                            alt=""
                          />
                        </Link>
                    }
                  </li>
                )
              })
            }
          </ul>
        </div>
      </div>
    );
  }
FE committed
69 70 71
}

export default Index;