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,29 +17,50 @@ 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={'index-banner-swiper'}>
                 <div className={'swiper-container'} ref={el => this.container = el}>
                     <ul className="swiper-wrapper">
-                    {bannerList.length && bannerList.map((item, index) => {
+                        {bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
                             return (
                                 <li className={'swiper-slide'} key={index}>
-                                <img src={item.name} alt=""/>
+                                    {
+                                        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 {
+.index-banner-swiper{
+    .swiper {
         &-container {
             padding: 0 20px !important;
         }
 
         &-slide {
-        transform: scale3d(1,0.9,1);
+            width: 335px !important;
+            height: 168px !important;
+            transform: scale3d(1, 0.9, 1);
+            transition: transform .4s;
 
             img {
                 width: 100% !important;
@@ -12,19 +16,8 @@
             }
 
             &-active {
-            width: 335px !important;
-            height: 168px !important;
                 transform: scale3d(1, 1, 1);
-
-            img {
-                width: 100% !important;
-                height: 100% !important;
-            }
             }
         }
-
-    img {
-        width: 100%;
-        height: 100%;
     }
 }
\ 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