day02-移动web开发－适配方案2（理论）

触摸事件touch：

• 解释touch:

1. touch是移动端的触摸事件 而且是一组事件
2. touchstart 当手指触摸屏幕的时候触发
3. touchmove 当手指在屏幕来回的滑动时候触发
4. touchend 当手指离开屏幕的时候触发
5. touchcancel 当被迫终止滑动的时候触发（来电，弹消息）
6. 利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件

• 使用touch:
  1.绑定事件：box.addEventListener('touchstart',function () { });
  2.事件对象：
  名字：TouchList------触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合
  changedTouches 改变后的触摸点集合
  targetTouches 当前元素的触发点集合
  touches 页面上所有触发点集合
  3.触摸点集合在每个事件触发的时候会不会去记录触摸
  changedTouches 每个事件都会记录
  targetTouches，touches 在离开屏幕的时候无法记录触摸点
  4.分析滑动实现的原理：
  4.1 就是让触摸的元素随着手指的滑动做位置的改变
  4.2 位置的改变：需要当前手指的坐标
  4.3 在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
  4.4 clientX clientY 基于浏览器窗口（视口）
  4.4 pageX pageY 基于页面（视口）
  4.4 screenX screenY 基于屏幕

手势事件：

<script>
    window.onload = function () {
        /*1. 理解移动端的手势事件*/
        /*2. swipe swipeLeft  swipeRight swipeUp swipeDown */
        /*3. 左滑和右滑手势怎么实现*/
        var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
            /*手势的条件*/
            /*1.必须滑动过*/
            /*2.滑动的距离50px*/
            var isMove = false;
            var startX = 0;
            var distanceX = 0;
            dom.addEventListener('touchstart',function (e) {
                startX = e.touches[0].clientX;
            });
            dom.addEventListener('touchmove',function (e) {
                isMove = true;
                var moveX = e.touches[0].clientX;
                distanceX = moveX - startX;
            });
            dom.addEventListener('touchend',function (e) {
                /*滑动结束*/
                if(isMove && Math.abs(distanceX) > 50){
                    if(distanceX > 0){
                        rightCallback && rightCallback.call(this,e);
                    }else{
                        leftCallback && leftCallback.call(this,e);
                    }
                }
                /*重置参数*/
                isMove = false;
                startX = 0;
                distanceX = 0;
            });
        }
        bindSwipeEvent(document.querySelector('.box'),function (e) {
            console.log(this);
            console.log(e);
            console.log('左滑手势');
        },function (e) {
            console.log(this);
            console.log(e);
            console.log('右滑手势');
        });

    }
</script>

tap事件:

1. tap事件 轻击 轻触 （响应速度快）
2. 移动端也有click事件 （在移动为了区分是滑动还是点击，click点击延时300ms）
3. 影响用户体验 响应太慢了。
4. 解决方案：
   4.1 使用tap事件（不是移动端原生事件，通过touch相关事件衍生过来） （zepto.js tap事件）了解其原理
   4.2 使用一个叫：fastclick.js 提供移动端click响应速度的
   4.2.1 下载：https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
   4.2.2 使用：

<script src="../js/fastclick.min.js"></script>
<script>
    /*当页面的dom元素加载完成*/
    document.addEventListener('DOMContentLoaded', function() {
        /*初始化方法*/
        FastClick.attach(document.body);
    }, false);
    /*正常使用click事件就可以了*/
</script>
<script>
    window.onload = function () {
        /*使用tap事件*/
        /*1. 响应的速度比click要快   150ms */
        /*2. 不能滑动*/
        var bindTapEvent = function (dom, callback) {
            /*事件的执行顺序*/
            /*在谷歌浏览器模拟看不到300ms的效果*/
            /*在真机上面才能看看到延时效果*/
            var startTime = 0;
            var isMove = false;
            dom.addEventListener('touchstart', function () {
                //console.log('touchstart');
                startTime = Date.now();
                /*Date.now();*/
            });
            dom.addEventListener('touchmove', function () {
                //console.log('touchmove');
                isMove = true;
            });
            dom.addEventListener('touchend', function (e) {
                //console.log('touchend');
                console.log((Date.now() - startTime));
                if ((Date.now() - startTime) < 150 && !isMove) {
                    callback && callback.call(this, e);
                }

                startTime = 0;
                isMove = false;
            });
            /*dom.addEventListener('click',function () {
             //console.log('click');
             });*/
        }

        bindTapEvent(document.querySelector('.box'), function (e) {
            console.log(this);
            console.log(e);
            console.log('tap事件')
        });
    }
</script>

两栏自适应:

让这个元素绝对绝缘 bfc
不让其他浮动元素影响自己
不让自己的浮动去影响别的元素

image.png
image.png

区域滚动：

区域滚动效果
条件：一个容器装着一个容器html结构，找到大容器，子容器大于父容器

window.onload = function () {
    document.querySelector('.jd_cateLeft').addEventListener('touchmove',function(e){ 

    e.preventDefault();

});
document.querySelector('.jd_cateRight').addEventListener('touchmove',function(e){ 

    e.preventDefault();

});
    /*区域滚动效果*/
    /*条件：一个容器装着一个容器html结构*/
    /*找到大容器*/
    /*子容器大于父容器*/
    new IScroll(document.querySelector('.jd_cateLeft'),{
        scrollX:false,
        scrollY:true
    });
    new IScroll(document.querySelector('.jd_cateRight'),{
        scrollX:true,
        scrollY:false
    });
}

360截图16720409246257_看图王.png