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

你可能感兴趣的:(H5+CSS3)