younth / react-swipes

:fire: 基于React的移动端卡片滑动组件
MIT License
185 stars 40 forks source link

when I use it in my react project it goes wrong #4

Open summerangel opened 7 years ago

summerangel commented 7 years ago

@younth image get the wrong message in console "Cannot read property 'transitionProperty' of undefined"

younth commented 7 years ago

@summerangel hi , 请问你是在什么环境下使用的,是如何引入的呢?方便的话贴下使用的代码哈~

summerangel commented 7 years ago

@younth 就是直接把你的demo放到我项目中来运行,然后就报那个错误了,项目用的是react,通过npm install 来安装的你的插件,react中用的是render: function() {}这种格式,跟你demo中的这个不同。代码被我撤回了,贴不了代码

younth commented 7 years ago

render: function() {}这个没问题的。你在react工程里面,建议通过import的方式引入库使用。

import ReactSwipe from 'react-swipes'

    // swipes 的配置
    let opt = {
    distance: 620, // 每次移动的距离,卡片的真实宽度
    swTouchend: (ev) => {
        let data = {
            moved: ev.moved,
            originalPoint: ev.originalPoint,
            newPoint: ev.newPoint,
            cancelled: ev.cancelled
        }
        console.log(data);
    }
    }

render: function(){
    return(
    <div className="card-swipe" >
        // 第二层div  react-swipes生成一个className为 card-slide的div
        <ReactSwipe className="card-slide" options={opt}>
            // 第三层,即本身的item
            this.state.card.length && this.state.card.map((item, index) => <div className="item"> </div>
        </ReactSwipe>
    </div>
)
}
summerangel commented 7 years ago

@younth 找到 原因了,可能是react版本不同,我这个版本的需要.getDomNode()来获取。 image 现在就是在浏览器中如果使用手机模式就滑动不了,我看了下你的demo,也是一样,这个是要在发布上去了才能滑动吗?

younth commented 7 years ago

@summerangel 还真是这样,我把demo通过本地server打开就可以在手机模式滑动了,直接文件打开不行,原因需要看看。你没有起本地server吗?

summerangel commented 7 years ago

我放项目中,浏览器中手机模式又能滑动了,后面没有出现不滑动的现象