React 触屏在uc、qq浏览器下的坑,求教大牛

#1

用react做一个触屏的列表组件,遇到了坑点。chrome浏览器下一切正常。
到了uc、qq手机浏览器就会发现了问题。
具体我要实现的是,手指向右滑动是,整个列表跟着滑动,向左滑动时整个列表也跟着向左滑动。
在uc、qq浏览器下的坑点是,手指滑动时,列表不会实时跟着滑动,而是不流畅的跟着滑动。
代码如下

var React = require("react");
var $ = require("jquery");
var Base =require("Base");

//浏览器前缀
var _prefixStyle = Base.prefixStyle();

var SlideList = React.createClass({
    getInitialState : function () {
        return {
            isUpdate : false
        }
    },
    getDefaultProps : function(){
        return {
            slideList           : null,     //数据列表
            isTouchDown         : false,    //是否按下
            currentX            : 0,        //当前位置
            left                : 0,        //偏移位置
            startX              : 0,        //按下位置
            nowX                : 0,        //移动的位置
            delateX             : 0,        //偏移的位置
            minLeft             : 0         //最小偏移位置
        }
    },
    //render前加载数据
    componentWillMount :function(){
        this.props.slideList =this.props.dataList.map(function(slideItem,index){
            return (
                <li>
                <a href={slideItem.link}>
                    <img src={slideItem.faceimg} />
                    <p>{slideItem.title}</p>
                </a>
                </li>
            );
        });
    },
    componentDidMount : function(){
        var $module= $(".module");
        var $content =$(".module-content ul");

        this.props.minLeft = $module.width() -  $content.width() - 20;

    },
    //触屏开始
    onTouchStart : function(e){
        if(this.props.isTouchDown){
            return ;
        }
        this.props.isTouchDown = true;
        var event=e||window.event;
        this.props.startX = event.touches[0].pageX;
    },
    //触屏滑动
    onTouchMove : function(e){
        e.preventDefault();
        if(!this.props.isTouchDown){
            return;
        }
        var event=e||window.event;
        this.props.nowX = event.touches[0].pageX;
        this.props.delateX = this.props.nowX - this.props.startX;
        this.props.left = this.props.currentX + this.props.delateX;

        this.setState({
           isUpdate : !this.state.isUpdate
        });

    },
    //触屏结束
    onTouchEnd : function(e){
        if(!this.props.isTouchDown){
            return;
        }
        this.props.isTouchDown = false;

        //判断超过最左边,最右边,如果超过则定定位到  极限位置
        if(this.props.delateX > 0 && this.props.left>0){
            this.props.left = 0;
            this.setState({
                isUpdate : !this.state.isUpdate
            });
        }else if(this.props.delateX < 0 && this.props.left<this.props.minLeft){
            this.props.left = this.props.minLeft;
            this.setState({
                isUpdate : !this.state.isUpdate
            });
        }
        this.props.currentX = this.props.left;
        this.props.startX = 0;
        this.props.nowX = 0;
        this.props.delateX = 0;
    },
    render : function(){


        var innerStyle ={
            left : this.props.left
        }
        if(!this.props.isTouchDown){
            innerStyle[_prefixStyle + "transition"] = "all 0.3s";
        }

        //事件组合
        var Events = {
            onTouchStart : this.onTouchStart,
            onTouchMove : this.onTouchMove,
            onTouchEnd : this.onTouchEnd
        }

        return (
            <div className="module">
            <div className="module-title">
                <i className="fa fa-list-ul"></i> 我的小说
            </div>
                <div className="module-content">
                    <ul className="clearfix" {...Events} style={innerStyle}>
                        {this.props.slideList}
                    </ul>
                </div>
            </div>
        );
    }
})



module.exports = SlideList;
#2

求大牛帮忙看一下。
源码地址:https://github.com/coocssweb/react-plug/blob/master/components/SlideList/SlideList.js
我自己开发的一个移动端插件库,之前一直没在手机上调适,现在在手机上调兼容,所有插件都是这样的问题(触屏滑动时会有问题),chrome手机浏览器下都正常,uc、qq 手机浏览器在触屏滑动时会有问题。

#3

OK 谢谢大家已经找到解决方案。
react 触屏最好是要开启
React.initializeTouchEvents(true);
然后就没问题了,不开启的话react会吧touchmove延后到手指滑动停止后一起处理,因此会有不流畅的现象。
修改后的代码如下。
var React = require(“react”);
React.initializeTouchEvents(true);
var $ = require(“jquery”);
var Base =require(“Base”);

#4

奇怪的是,为毛chrome浏览器下,即使不开启也可以呢?这个我也还在学习。
国外大牛的开源,可以看到做触屏的时候都用
React.initializeTouchEvents(true);
初始化触屏事件。。。。

#5

看上去很厉害的样子 看了你的github 可以指导一下吗? 拜师求教

开发环境 和调试环境 怎么部署呢 可以 在 github 上写个教程吗 ,帮助菜鸟学习一下 开发环境配置部署呀

#6

我也是新手啊!很多组件写法还很不好,比如限制参数传入等等。。。。打算后面一步一步完善。
就是在做项目的过程中,把感觉会经常用到的发布到自己的git上而已啦!!
配置环境的话可以看这个 https://github.com/gaearon/react-hot-boilerplate

#7

git 上吗??那就要看教程了!我也发一个吧!

学几个基本的的命令!在windows和mac下都很好配置。linux没配过…

#8

老师 ,你好 为什么生成后的js 文件都这么大呀 ,2m 多 一个小小的功能 js 都2m 多呢

#9

这个在v0.14里面就是默认开启了。

#10

用 translate来做比较好

#11
this.props.startX = event.touches[0].pageX;

props 可以直接赋值的吗?谁教的?