手机版官网技术总结(一)

原创 2016年08月30日 13:14:33

首先

手机版官网暂告一段落了,终于舍得花时间来总结一下手机版官网当中学到的知识点以及技术总结。
目前所在的公司是一家创业公司,公司规模虽然不大,但是环境还是蛮不错的,也比较年轻化,体制不僵硬,而且互联网金融类的产品,我也非常喜欢。
这个手机版本的官网主要是用于从微信公共号打开浏览,因此适配都是按照微信来的。区别在于微信打开屏幕高度会把微信的头部包含进去,所以网页里的内容的高度就要以此为标准。

开发时间 10天
新接触的方向 优化、国际化、数据交互
新技术 hammer.js / zepto.js / i18n

第一篇

我打算从用到的js框架讲起–zepto.js
zepto.js和jQuery我觉得差不多,目前用到的API和方法里没有太大的差别,我对zepto最大的三点印象就是:
1、文件小,只有8K多
2、支持手机上的触摸事件,应用于手机版web
3、不支持IE浏览器
看了一篇博客讲了几点区别,但我没怎么遇到,这里贴一下链接
但据说zepto.js上的触摸事件不太好用,坑很多啊,没直接尝试,网上查了查,很多说zepto的touch事件存在问题,PS:提供一个zeptotouch触摸事件的解决办法,大致原因我看了一下都跟事件冒泡有关,通常阻止事件冒泡后,又有一些滑动或者滚动不能被触发,因此我果断用了hammer.js,百度还有一个touch.js
,大家也可以尝试一下,文件超级小,当时我没找到合适的demo来研究,所以选择了hammer.js。

简单举例

//定义变量,注意这里获取dom节点的时候一定不要用$符号,会报错
var map = new Hammer(document.getElementById('map'));
//绑定事件之前有一个类似于事件开关的东西,不设置的默认为true
map.get('pan').set({enable:false});
map.get('pinch').set({enable:true});
map.on("panstart", function(e){
    alert("1");
});
map.on("pan", function(a){
    alert("2");
});

hammer.js的demo,官网很详细,直接去看就好。在这里我主要总结一下它的事件包含的对象还有遇到的bug,最后再附上两个项目中提取出来的小demo。

Name Value
type 事件的名称,比如panstart
deltaX X坐标轴上的移动距离
deltaY Y坐标轴上的移动距离
deltaTime 交互过程的总时长
distance 移动距离
angle 移动角度
velocityX 在X坐标轴上的移动速率,单位为px/ms
velocityY 在Y坐标轴上的移动速率,单位为px/ms
velocity X/Y上最高的速率值
direction 移动方位,匹配DIRECTION常量
offsetDirection 从起始点算起的移动方位
scale 多点触摸结束时的缩放比例,若为单点触摸则为1
rotation 多点触摸结束时的旋转数值,若为单点触摸则为0
center 多点触摸的中心位置,或者单点的坐标
srcEvent 源事件对象,类型为TouchEvent,MouseEvent或PointerEvent
target 接受事件的目标
pointer 基本的指针类型,可以为touch、mouse、pen或kinect
eventType 事件类型,匹配INPUT常量
isFirst true表示当前交互为首次交互
isFinal true表示当前交互为最后一次交互

demo

在这儿分享两个中的一个我用hammer.js做的demo。
demo1
1、实现卡片式布局多个卡片的左右滑动
2、主要用到pan事件
具体实现方式如下:
//主要思想:通过改变绝对定位的left值,来实现滑动
var sub = new Hammer(document.getElementById("sub-con"));
var subcon = $(".sub-con");
moveCard(sub,subcon);
function moveCard(a,b){
    var _width = b.width();
    var num;
    //这里一定要先定位要最初的left值,panstart只触发一次,num保存最初元素的位置,从而在此基础上进行偏移
    a.on("panstart",function(d){
        num = parseInt(b.css('left'));
    });
    a.on("pan",function(e){
        var delta = num + e.deltaX;
        if(delta < 10 && delta > -(_width-screen.width+10)){
                b.css("left", delta);
        }
    });
}
demo 2
1、实现图片在手机上的双指放大缩小和双击放大可拖动
2、主要用到pinch和tap事件
此demo我分享在github上,有感兴趣的同学可以去看我的github

hammer的冒泡事件

今天偶然发现hammer源码里写了了阻止冒泡的方法。
在swipe、pan、tap、press事件里,取消了阻止,在pinch和rotate事件里加了阻止。

 preventDefaults: function(input) {
        var srcEvent = input.srcEvent;
        var direction = input.offsetDirection;
        // if the touch action did prevented once this session
        if (this.manager.session.prevented) {
            srcEvent.preventDefault();
            return;
        }
        var actions = this.actions;
        var hasNone = inStr(actions, TOUCH_ACTION_NONE) && !TOUCH_ACTION_MAP[TOUCH_ACTION_NONE];
        var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_Y];
        var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_X];
        if (hasNone) {
            //do not prevent defaults if this is a tap gesture
            var isTapPointer = input.pointers.length === 1;
            var isTapMovement = input.distance < 2;
            var isTapTouchTime = input.deltaTime < 250;
            if (isTapPointer && isTapMovement && isTapTouchTime) {
                return;
            }
        }
        if(scale == 1){
            return;
        }
        if (hasPanX && hasPanY) {
            // `pan-x pan-y` means browser handles all scrolling/panning, do not prevent
            return;
        }
        if (hasNone ||
            (hasPanY && direction & DIRECTION_HORIZONTAL) ||
            (hasPanX && direction & DIRECTION_VERTICAL)) {
            return this.preventSrc(srcEvent);
        }
    },
    /**
     * call preventDefault to prevent the browser's default behavior (scrolling in most cases)
     * @param {Object} srcEvent
     */
    preventSrc: function(srcEvent) {
        this.manager.session.prevented = true;
        srcEvent.preventDefault();
    }
};

滞留一个问题,目前也还没解决,如何取消pinch的阻止冒泡?

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

城市合伙人官网和手机版页面总结

底层图,浮在背景图上的图片和图片上的文本:三层 **方法一:将图片上的文本放入图片的div里面,然后定位。调bottom++。 方法二:将图片上的文本单独放一个div。然后使用top的负值将其浮在...

梦行Monxin企业建站系统(PHP源码,带PC站,手机站,微官网,APP建站系统,傻瓜式自助建站系统) 橙色版

梦行Monxin企业建站系统是采用PHP+MySQL方式运行的开源程序。主要特点在于:模板界面随意换、可视化模块排版、海量功能按需扩展、带手机版界面。 登陆接口:QQ登录,微信登录。 支付接...

91手机助手官网iPhone版 v5.3.2 官方版

91手机助手官网iPhone版 v5.3.2 官方版 软件大小:23.8MB 软件语言:简体中文 软件性质:常用软件 软件授权:官方版 更新时间:2014-05-06 应用平台:/WinX...

java版博客系统绝对震撼 项目用到的技术很多,做的比较正规把,和官网的博客差别不大

原文: http://www.zuidaima.com/share/1550463309548544.htm 源代码下载地址:java版博客系统绝对震撼 项目用到的技术很多,做的比较正规把,和官网的博...

糯米N1手机官网固件02

  • 2017年01月28日 16:04
  • 55MB
  • 下载

JBox2D手机游戏引擎介绍(附jbox2d官网网址)

Box2d是一个很出名的开源物理引擎2d物理引擎。Box2d有C++,flash和Java等版本。 Box2d论坛网址: http://box2d.org/forum/viewforum.php?f...

仿Oppo手机官网,html+css

  • 2015年09月12日 17:31
  • 343KB
  • 下载

糯米N1手机官网固件03

  • 2017年01月28日 16:35
  • 55MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手机版官网技术总结(一)
举报原因:
原因补充:

(最多只允许输入30个字)