Commit 10a9fc8c by zhanghaozhe

index-banner-swiper

parent 48a42e0b
...@@ -2,14 +2,14 @@ import React, { Component } from 'react'; ...@@ -2,14 +2,14 @@ import React, { Component } from 'react';
import Swiper from 'swiper' import Swiper from 'swiper'
import './index.scss' import './index.scss'
import 'swiper/dist/css/swiper.min.css' import 'swiper/dist/css/swiper.min.css'
import { Link } from "react-router-dom";
class Index extends Component { class Index extends Component {
container = null container = null
swiper swiper = null
componentDidMount() { componentDidMount() {
const {bannerList} = this.props
const _this = this
this.swiper = new Swiper('.swiper-container', { this.swiper = new Swiper('.swiper-container', {
direction: 'horizontal', direction: 'horizontal',
loop: true, loop: true,
...@@ -17,28 +17,49 @@ class Index extends Component { ...@@ -17,28 +17,49 @@ class Index extends Component {
centeredSlides: true, centeredSlides: true,
slidesPerView: 'auto', slidesPerView: 'auto',
loopedSlides: 2, loopedSlides: 2,
on: { autoplay: true
sliderMove() {
}
}
}) })
} }
componentWillUnmount() {
this.swiper.destroy()
}
render() { render() {
const {bannerList} = this.props const {bannerList} = this.props
return ( return (
<div className={'swiper-container'} ref={el => this.container = el}> <div className={'index-banner-swiper'}>
<ul className="swiper-wrapper"> <div className={'swiper-container'} ref={el => this.container = el}>
{bannerList.length && bannerList.map((item, index) => { <ul className="swiper-wrapper">
return ( {bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
<li className={'swiper-slide'} key={index}> return (
<img src={item.name} alt=""/> <li className={'swiper-slide'} key={index}>
</li> {
) Number.isNaN(parseInt(item.jump_url)) ?
})} <a href={item.jump_url} key={index}>
</ul> <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> </div>
); );
} }
......
.swiper { .index-banner-swiper{
&-container { .swiper {
padding: 0 20px !important; &-container {
} padding: 0 20px !important;
&-slide {
transform: scale3d(1,0.9,1);
img {
width: 100% !important;
height: 100% !important;
} }
&-active { &-slide {
width: 335px !important; width: 335px !important;
height: 168px !important; height: 168px !important;
transform: scale3d(1, 1, 1); transform: scale3d(1, 0.9, 1);
transition: transform .4s;
img { img {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
} }
}
}
img { &-active {
width: 100%; transform: scale3d(1, 1, 1);
height: 100%; }
}
} }
} }
\ No newline at end of file
...@@ -2,8 +2,8 @@ import React, { Component } from 'react' ...@@ -2,8 +2,8 @@ import React, { Component } from 'react'
import { Course, CallApp } from '../../common' import { Course, CallApp } from '../../common'
import './index.scss' import './index.scss'
import { WithTab } from '@/HOCs' import { WithTab } from '@/HOCs'
import Swiper from 'react-mobile-swiper' // import Swiper from 'react-mobile-swiper'
import createStyle from './createStyle' // import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load' import LazyLoad from 'react-lazy-load'
import { http } from '@/utils' import { http } from '@/utils'
import LiveRoom from './liveRoom' import LiveRoom from './liveRoom'
...@@ -13,7 +13,7 @@ import { connect } from "react-redux"; ...@@ -13,7 +13,7 @@ import { connect } from "react-redux";
import TopSwiper from './TopSwiper' import TopSwiper from './TopSwiper'
const animateTypes = Swiper.animateTypes // const animateTypes = Swiper.animateTypes
@connect(state => ({ @connect(state => ({
user: state.user user: state.user
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment