umi 或者 react 中 如何使用 swiper

周大胖子

需求明确：需要在react 中使用 swiper ，且使用导航，自动播放等功能。

参考文献：https://swiperjs.com/react/   [  这是swiper 的 方式 ];

前提条件：
    1. umi 默认使用的是css modules , 如果要使用 react 的 css 引入方式， 需要在 umirc.ts 文件里 增加配置[ 参照上篇或者百度 哈哈  我当时可是给这个憋了三四天才明白 不得不说 umi 的官方文档 莫名其妙 呵呵]。
    2. swiper 的官方文档引入的是 .sass 文件 ， umi 不具备编辑此文件的 能力， 全部换成 .less 结尾即可
    3. 建议使用 cnpm 的 淘宝镜像源 进行安装 否则会凉

开始：
    1. 在react 中安装swiper

1. cnpm  install swiper --save

复制代码

    2. 在 react 的 项目中 引入文件 [这是最基础的swiper , 没有任何组件]
         [ 这里得说明，该引入 是最初始化的 不包含 组件 ]  

1. import { Swiper, SwiperSlide } from 'swiper/react';
   
2. import "../../assets/style/laomo.css";
   
3. import 'swiper/swiper.less';
   
4. 
   
5. 
   
6. 
   
7. <Swiper
   
8.                     spaceBetween={10}
   
9.                     slidesPerView={4}
   
10.                     zoom={true}
    
11.                     loop={true}  // 这个不用组件可以直接用
    
12.            
    
13.                     pagination={{ clickable: true }}
    
14.                     onSlideChange={() => console.log('slide change')}
    
15.                     onSwiper={(swiper) => console.log(swiper)}
    
16.                      className="swiper-container">
    
17. 
    
18.                     {
    
19.                         this.state.hezuoArr.map((item, index)=>{
    
20.                             return (
    
21.                                 <SwiperSlide key={index} className="tbox">
    
22.                                     <div className="tbox-img">
    
23.                                         <img src={item.img}/>
    
24.                                     </div>
    
25.                                     <div className="tbox-title">
    
26.                                         {item.title}
    
27.                                     </div>
    
28.                                 </SwiperSlide>
    
29.                             );
    
30.                         })
    
31.                     }
    
32.                     
    
33.                   
    
34.                 </Swiper>

复制代码

    3.  你得用组件吧，然后 就引入

1. import SwiperCore, { Navigation, Pagination, Autoplay} from 'swiper';//这里 只做个样子
   
2. import 'swiper/components/navigation/navigation.less';//这里 只做个样子
   
3. import 'swiper/components/pagination/pagination.less';//这里 只做个样子
   
4. import 'swiper/components/scrollbar/scrollbar.less'; //这里 只做个样子
   
5. SwiperCore.use([Navigation ，Autoplay]);//这里 只做个样子

复制代码

(每种 组件的使用方法不同， 就比方说 有的有less  有的没有， 有的 直接就能用 ，有的需要加在属性里：例如 autopaly 就得引入且加在属性里)

最终版

1. // 这是合作伙伴栏目
   
2. import React from 'react';
   
3. import createReactClass from 'create-react-class';  
   
4. import SwiperCore, { Autoplay} from 'swiper';
   
5. import { Swiper, SwiperSlide } from 'swiper/react';
   
6. import "../../assets/style/laomo.css";
   
7. import 'swiper/swiper.less';
   
8. 
   
9. 
   
10. const Cooperation = createReactClass({
    
11. 
    
12.     getInitialState:function(){
    
13.         return {
    
14.             hezuoArr:[
    
15.                 {'title':'合作伙伴1','img':'http://www.lygky.com/img/logos/logo.png'},
    
16.                 {'title':'合作伙伴2','img':'http://www.lygky.com/img/logos/logo.png'},
    
17.                 {'title':'合作伙伴3','img':'http://www.lygky.com/img/logos/logo.png'},
    
18.                 {'title':'合作伙伴4','img':'http://www.lygky.com/img/logos/logo.png'},
    
19.                 {'title':'合作伙伴5','img':'http://www.lygky.com/img/logos/logo.png'},
    
20.                 {'title':'合作伙伴6','img':'http://www.lygky.com/img/logos/logo.png'},
    
21.                 {'title':'合作伙伴7','img':'http://www.lygky.com/img/logos/logo.png'},
    
22.                 {'title':'合作伙伴8','img':'http://www.lygky.com/img/logos/logo.png'}
    
23.             ]
    
24.         }
    
25.     },
    
26. 
    
27.     render() {
    
28.         SwiperCore.use([Autoplay]);
    
29.         return (
    
30.             <section className="hezuo-box">
    
31.                <div  className="min-section">  
    
32.                     <div className="min-title"> - 公司案例与合作伙伴 - </div>
    
33.                     <p className="min-title-p1">为每一位使用者守住您的知识产权与客户档案</p>
    
34.                 </div>
    
35.                 <div className="ttt">
    
36.                 <Swiper
    
37.                     spaceBetween={10}
    
38.                     slidesPerView={4}
    
39.                     zoom={true}
    
40.                     loop={true}
    
41.                     autoplay = {true}
    
42.                     pagination={{ clickable: true }}
    
43.                     onSlideChange={() => console.log('slide change')}
    
44.                     onSwiper={(swiper) => console.log(swiper)}
    
45.                      className="swiper-container">
    
46. 
    
47.                     {
    
48.                         this.state.hezuoArr.map((item, index)=>{
    
49.                             return (
    
50.                                 <SwiperSlide key={index} className="tbox">
    
51.                                     <div className="tbox-img">
    
52.                                         <img src={item.img}/>
    
53.                                     </div>
    
54.                                     <div className="tbox-title">
    
55.                                         {item.title}
    
56.                                     </div>
    
57.                                 </SwiperSlide>
    
58.                             );
    
59.                         })
    
60.                     }
    
61.                     
    
62.                   
    
63.                 </Swiper>
    
64.                 </div>
    
65.                
    
66.             </section>
    
67.         );
    
68.          
    
69.     }
    
70. })
    
71. 
    
72. export default Cooperation;

复制代码