清风带你学-H5+CSS3（五）移动端滑动,手势，布局

M-web

• 了解touch事件的使用

• 独立完成jdM的轮播图

• 掌握区域滚动插件使用

• 了解手势事件的原理

• 安装less运行环境nodeJS

touch事件

触摸事件

事件	说明
touchstart	当手指触碰屏幕时候触发该事件
touchmove	当手指在屏幕上滑动时候触发该事件
touchend	当手指离开屏幕时触发该事件
touchcancel	当系统停止跟踪（被迫终止）触摸时候会触发。

触摸点集合

触摸点集合	说明
targetTouches	目标元素的所有当前触摸点集合
changedTouches	目标元素的最新更改的触摸点集合
touches	页面上的所有触摸点集合

注意：在touchend事件的时候event只会记录changedtouches

坐标组

点坐标	说明
pageX/pageY	基于页面大小的坐标
clientX/clientY	基于视口大小的坐标
screenX/screenY	基于屏幕大小的坐标

IScroll

插件介绍

区域滚动插件，对于移动端的页面滚动效果表现不一致，和需要上拉刷新上拉加载等效果的页面，可以帮助快速的实现滚动效果。

插件使用

IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。

尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。最佳的HTML结构如下：

    

        
...
        
...
        ...
    

iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。

最基本的脚本初始化的方式如下：

第一个参数可以是滚动容器元素的DOM选择器字符串，也可以是滚动容器元素的引用对象。下面是一个有效的语法：

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);

所以基本上你要么直接传递元素，要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:

var myScroll = new IScroll('.wrapper');

注意，iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll，你需要构建自己的循环机制。

手势事件

轻触事件tap

出现的原因：由于早期移动端页面双击可以缩放，为了检测双击操作，延长了click的响应时间，200-300ms。

第一种解决方案：

        /*模拟tap事件（tap在移动端库zepto.js有使用）*/
        /*1. 响应的速度比click要快   150ms */
        /*2. 不能滑动*/
        var bindTapEvent = function (dom, callback) {
            var startTime = 0;
            var isMove = false;
            dom.addEventListener('touchstart', function () {
                startTime = Date.now();
            });
            dom.addEventListener('touchmove', function () {
                isMove = true;
            });
            dom.addEventListener('touchend', function (e) {
                if ((Date.now() - startTime) < 150 && !isMove) {
                    callback && callback.call(this, e);
                }
                startTime = 0;
                isMove = false;
            });
        }

第二种解决方案：

手势事件swipe

手势事件：滑动，左滑，右滑，上滑，下滑 （swipe在移动端库zepto.js有使）

      /*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('左滑手势');
        },function (e) {
            console.log('右滑手势');
        });

分类页面

背景属性

在一个大的容器内正中间显示一个小的背景图

• background-origin

  • 背景平铺的起点

  • 默认是从内边距开始平铺

  • padding-box 从内边距开始平铺

  • border-box 从边框开始平铺

  • content-box 从内容开始平铺

• background-clip

  • 背景图裁剪

  • 默认的裁剪方式 边框以外的被裁剪

  • border-box 边框以外的被裁剪

  • padding-box 内边距以外的被裁剪

  • content-box 内容以外的被裁剪

完成移动端常见滑动效果，理解移动端手势事件原理，掌握常见的移动端布局方式。

"我是Spirit_Breeze,中文<晟世清风>,在这纷纷乱世之中,祈望能有一股清流之风."本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究,欢迎研究讨论,转载请备注地址和作者,谢谢