react-swipers - npm explorer

react-swipers### 安装


npm i react-swipers --save


$3
#### 原理
swipes不依赖任何css，不会去改变子item的样式，也就是说，css完全控制在自己的代码中。所以有必要了解卡片滑动的原理：

`html

这是滑动的基础布局，最终的滑动也就是改变第二层div的translateX值。再加上transition 过渡效果，即可实现整个区域的运动，而最外层元素设置了溢出隐藏，这样整体效果就是单张卡片在运动了。

#### 具体使用

`js import ReactSwipe from 'react-swipers' // swipers 的配置 let opt = { distance: 620, // 每次移动的距离，卡片的真实宽度 currentPoint: 1,// 初始位置，默认从0即第一个元素开始 autoPlay: true, // 是否开启自动播放 interval: 2000, // 幻灯片切换时间,默认2000ms swTouchstart: (ev) => {

}, swTouchmove: (ev) => {

}, swTouchend: (ev) => { let data = { moved: ev.moved, originalPoint: ev.originalPoint, newPoint: ev.newPoint, cancelled: ev.cancelled } console.log(data); this.setState({ curCard: ev.newPoint }) } } // dom 部分 // 第一层div


        // 第二层div  react-swipes生成一个className为 card-slide的div
        
            // 第三层，即本身的item
            this.state.card.length && this.state.card.map((item, index) =>


$3

    
sandbox demo
$3

- 现在把css完全暴露给使用者了，这样第二层div的宽度（第三层元素的宽度和）需要大家在代码中计算，不是很方便，后续会把这块逻辑放到组件里面去，开发者只需要配置卡片基础属性即可。 - 卡片滑动过程想实现类似上面的缩放效果，目前需要在swTouchmove swTouchend` 钩子里面自己去实现，后面会把这个效果做到组件里面去，开发者选择是否开启。

react-swipers### 安装

npm i react-swipers --save

$3

#### 原理

swipes不依赖任何css，不会去改变子item的样式，也就是说，css完全控制在自己的代码中。所以有必要了解卡片滑动的原理：

html

这是滑动的基础布局，最终的滑动也就是改变第二层div的translateX值。再加上transition

 过渡效果，即可实现整个区域的运动，而最外层元素设置了溢出隐藏，这样整体效果就是单张卡片在运动了。

#### 具体使用

js
    import ReactSwipe from 'react-swipers'
    
    // swipers 的配置
    let opt = {
    distance: 620, // 每次移动的距离，卡片的真实宽度
    currentPoint: 1,// 初始位置，默认从0即第一个元素开始
    autoPlay: true, // 是否开启自动播放
    interval: 2000,  // 幻灯片切换时间,默认2000ms
    swTouchstart: (ev) => {

    },
    swTouchmove: (ev) => {

    },
    swTouchend: (ev) => {
        let data = {
            moved: ev.moved,
            originalPoint: ev.originalPoint,
            newPoint: ev.newPoint,
            cancelled: ev.cancelled
        }
        console.log(data);
        this.setState({
            curCard: ev.newPoint
        })
    }
    }
    
    // dom 部分
    // 第一层div


        // 第二层div  react-swipes生成一个className为 card-slide的div
        
            // 第三层，即本身的item
            this.state.card.length && this.state.card.map((item, index) =>

- 现在把css完全暴露给使用者了，这样第二层div的宽度（第三层元素的宽度和）需要大家在代码中计算，不是很方便，后续会把这块逻辑放到组件里面去，开发者只需要配置卡片基础属性即可。
- 卡片滑动过程想实现类似上面的缩放效果，目前需要在

swTouchmove swTouchend` 钩子里面自己去实现，后面会把这个效果做到组件里面去，开发者选择是否开启。