react 轮播图

向右看齐 2021-07-24 11:22 446阅读 0赞

1、安装
    	cnpm install --save react-swipeable-views
    	
    2、引入
    	import SwipeableViews from 'react-swipeable-views';
    	import { autoPlay } from 'react-swipeable-views-utils';
    	const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
    
    3、使用
    	 
    	 <AutoPlaySwipeableViews style={
       {height:'200px'}}
                interval={3000}
                onChangeIndex={ this.handleChangeIndex }   轮播改变回调,第一个参数是索引
            >
    		 <div>slide n°1</div>
    		 <div>slide n°1</div>
    		 <div>slide n°1</div>
           </AutoPlaySwipeableViews>
           
    4、样式按照正常css自定义
    
    5、分页器需要自己写组件

代码示例:  
轮播

import React,{ Component} from 'react';
    import SwipeableViews from 'react-swipeable-views';
    import {  autoPlay } from 'react-swipeable-views-utils';
    import Pagination from './pagination/index'
    
    const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
    
    const styles = { 
        slide: { 
          minHeight: 100,
          color: '#fff',
        },
        slide1: { 
          height:'200px',
          width:'100%'
        },
        slide2: { 
          height:'200px'
        },
        slide3: { 
          height:'200px'
        },
      };
      
    
    class App extends Component{ 
        constructor()
        { 
            super();
            this.state={ 
                currentIndex:0
            }
        }
        handleChangeIndex = index => { 
            this.setState({ 
                currentIndex:index
            })
        }
        render()
        { 
            const banners=this.props.banners;
            return(
            <div className='swiper' style={ { height:'200px',position:'relative'}}>
                <AutoPlaySwipeableViews style={ { height:'200px'}}
                    interval={ 3000}
                    onChangeIndex={  this.handleChangeIndex }
                >
                { 
                    banners.map((item,index)=>{ 
                        return (
                            <div key={ index} className="swiper-view" style={ Object.assign({ }, styles.slide, styles.slide1)}>
                                <img src={ item} style={ { height:'200px',width:'100%'}} alt="" />
                            </div>
                        )
                    })
                    
                }
                </AutoPlaySwipeableViews>
                <Pagination dots={ banners.length} index={ this.state.currentIndex} style={ { height:'200px',position:'absolute'}} />
            </div>
            )
        }
    }
    
    export default App

分页器:

import React from "react"
    import "./style.less"
    
    export default class Pagination extends React.Component { 
        render() { 
            const dots = this.props.dots;
            const dotsArr = new Array(dots).fill(1);  
            const currentIndex = this.props.index;  
    
            return (
                <div className="swiper-pagination">
                    <ul>
                        { 
                            dotsArr.map((element,index) => { 
                                return <li className={  currentIndex === index ? 'selected' : ''} key={ index}></li>
                            })
                        }
                    </ul>
                </div>
            )
        }
    }

分页器样式:

.swiper-pagination{ 
        position: absolute;
        bottom: 10px;
        right: 10px;
        ul { 
            width: 100%;
            height: auto;
            text-align: center;
        }
        li { 
            list-style: none;
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background-color: #ccc;
            margin: 0 3px;
        }
        li.selected { 
            background-color: rgb(233, 32, 61);
        }
    }

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/a46e1b2ce7fd4f1db117daff74b2088d.png