Merge branch 'swiper'

package-lock.json

@@ -4777,6 +4777,14 @@
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
       "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
     },
+    "dom7": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.3.tgz",
+      "integrity": "sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==",
+      "requires": {
+        "ssr-window": "^1.0.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -13875,6 +13883,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
@@ -14157,6 +14170,15 @@
         }
       }
     },
+    "swiper": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.0.tgz",
+      "integrity": "sha512-jRCd/CGet9kaHwthHdd/sL/YU8CI157PWLyItnIcn/o/jP4haVky3zTF6f9F3JDpmQIw7jdWihISiYx0/oTHsg==",
+      "requires": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      }
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",

package.json

@@ -76,6 +76,7 @@
     "sass-resources-loader": "^2.0.0",
     "socket.io": "^2.2.0",
     "style-loader": "0.23.1",
+    "swiper": "^4.5.0",
     "terser-webpack-plugin": "1.2.2",
     "url-loader": "1.1.2",
     "video.js": "^7.6.0",

src/components/Index/TopSwiper/index.js

+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 = null
+
+    componentDidMount() {
+        this.swiper = new Swiper('.swiper-container', {
+            direction: 'horizontal',
+            loop: true,
+            spaceBetween: 12,
+            centeredSlides: true,
+            slidesPerView: 'auto',
+            loopedSlides: 3,
+            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 && 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>
+        );
+    }
+}
+
+export default Index;
\ No newline at end of file

src/components/Index/TopSwiper/index.scss

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

src/components/Index/index.js

@@ -2,17 +2,18 @@ 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'
 import { Link } from "react-router-dom"
 import { Toast } from 'antd-mobile'
 import { connect } from "react-redux";
+import TopSwiper from './TopSwiper'
 
 
-const animateTypes = Swiper.animateTypes
+// const animateTypes = Swiper.animateTypes
 
 @connect(state => ({
     user: state.user
@@ -210,43 +211,43 @@ class Index extends Component {
 }
 
 
-function TopSwiper({bannerList}) {
-    return (
-        <Swiper
-            type={animateTypes.CARD}
-            loop={true}
-            height={168}
-            autoPlay={true}
-            typePro
-            createStyle={createStyle}
-        >
-            {bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
-                return (
-                    Number.isNaN(parseInt(item.jump_url)) ?
-                        <a href={item.jump_url} key={index}>
-                            {/* <Link to={item.jump_url} key={index}> */}
-                            <img className="item" src={item.name} alt="" />
-                            {/* </Link> */}
-                        </a> :
-                        <Link
-                            to={{
-                                pathname: '/detail',
-                                search: `?id=${item.jump_url}`
-                            }}
-                            key={index}
-                        >
-                            <img
-                                className="item"
-                                src={item.name}
-                                alt=""
-                            />
-                        </Link>
-                )
-            })
-            }
-        </Swiper>
-    )
-}
+// function TopSwiper({bannerList}) {
+//     return (
+//         <Swiper
+//             type={animateTypes.CARD}
+//             loop={true}
+//             height={168}
+//             autoPlay={true}
+//             typePro
+//             createStyle={createStyle}
+//         >
+//             {bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
+//                 return (
+//                     Number.isNaN(parseInt(item.jump_url)) ?
+//                         <a href={item.jump_url} key={index}>
+//                             {/* <Link to={item.jump_url} key={index}> */}
+//                             <img className="item" src={item.name} alt="" />
+//                             {/* </Link> */}
+//                         </a> :
+//                         <Link
+//                             to={{
+//                                 pathname: '/detail',
+//                                 search: `?id=${item.jump_url}`
+//                             }}
+//                             key={index}
+//                         >
+//                             <img
+//                                 className="item"
+//                                 src={item.name}
+//                                 alt=""
+//                             />
+//                         </Link>
+//                 )
+//             })
+//             }
+//         </Swiper>
+//     )
+// }
 
 // 课程模块儿公共组件
 // 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个