index-banner-swiper

src/components/Index/TopSwiper/index.js

@@ -2,14 +2,14 @@ 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 {
     container = null
-    swiper
+    swiper = null
 
     componentDidMount() {
-        const {bannerList} = this.props
-        const _this = this
         this.swiper = new Swiper('.swiper-container', {
             direction: 'horizontal',
             loop: true,
@@ -17,28 +17,49 @@ class Index extends Component {
             centeredSlides: true,
             slidesPerView: 'auto',
             loopedSlides: 2,
-            on: {
-                sliderMove() {
-
-                }
-
-            }
+            autoplay: true
         })
     }
 
+    componentWillUnmount() {
+        this.swiper.destroy()
+    }
+
+
     render() {
         const {bannerList} = this.props
         return (
-            <div className={'swiper-container'} ref={el => this.container = el}>
-                <ul className="swiper-wrapper">
-                    {bannerList.length && bannerList.map((item, index) => {
-                        return (
-                            <li className={'swiper-slide'} key={index}>
-                                <img src={item.name} alt=""/>
-                            </li>
-                        )
-                    })}
-                </ul>
+            <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>
         );
     }

src/components/Index/TopSwiper/index.scss

-.swiper {
-    &-container {
-        padding: 0 20px !important;
-    }
-
-    &-slide {
-        transform: scale3d(1,0.9,1);
-
-        img {
-            width: 100% !important;
-            height: 100% !important;
+.index-banner-swiper{
+    .swiper {
+        &-container {
+            padding: 0 20px !important;
         }
 
-        &-active {
+        &-slide {
             width: 335px !important;
             height: 168px !important;
-            transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 0.9, 1);
+            transition: transform .4s;
 
             img {
                 width: 100% !important;
                 height: 100% !important;
             }
-        }
-    }
 
-    img {
-        width: 100%;
-        height: 100%;
+            &-active {
+                transform: scale3d(1, 1, 1);
+            }
+        }
     }
 }
\ No newline at end of file

src/components/Index/index.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import { Course, CallApp } from '../../common'
 import './index.scss'
 import { WithTab } from '@/HOCs'
-import Swiper from 'react-mobile-swiper'
-import createStyle from './createStyle'
+// import Swiper from 'react-mobile-swiper'
+// import createStyle from './createStyle'
 import LazyLoad from 'react-lazy-load'
 import { http } from '@/utils'
 import LiveRoom from './liveRoom'
@@ -13,7 +13,7 @@ import { connect } from "react-redux";
 import TopSwiper from './TopSwiper'
 
 
-const animateTypes = Swiper.animateTypes
+// const animateTypes = Swiper.animateTypes
 
 @connect(state => ({
     user: state.user