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

原创 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的阻止冒泡?

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

UVA 11624 两次bfs搞搞

搜索
  • sky_miange
  • sky_miange
  • 2015年12月04日 19:48
  • 403

HttpClient模拟登录手机版微博

昨天查询了关于使用httpclient模拟登录网站的信息,今天的附上代码package loginweibo;import com.sun.xml.internal.bind.v2.runtime.r...
  • sunshine__me
  • sunshine__me
  • 2015年07月20日 15:50
  • 859

Discuz!电脑版、手机版去除标题title中的Powered by Discuz!

电脑版: 打开 /template/default/common/header_common.htm 文件 找到 $navtitle - $_G['setting']['bbname'] - ...
  • lih062624
  • lih062624
  • 2017年04月07日 13:38
  • 3364

Setup VPN

Client OS: win7 32 OS: CentOS5.6 x86_64 VPN server name: xen1 xen1:  eth0: 192.168.1.136  eth1: 10.0...
  • liuy5277
  • liuy5277
  • 2011年07月31日 18:06
  • 1584

Android 源代码分享

Android 超过2个G的源代码集合~~各种功能实现,应有尽有~~云盘地址:http://yunpan.cn/cQbKArfxFniuS (提取码:f930) Android 好用的源码 Andro...
  • yyh352091626
  • yyh352091626
  • 2015年10月11日 10:53
  • 14827

车机与手机同步实验(MIRROLINK)

这两天研究了一下MIRROLINK,但是没有深入得资料,所以闲来就搞了几个软件,实现了ANDROID手机和WINCE车机,通过WIFI连接,实现屏幕同步和控制,仅仅实现了屏幕同步和控制。       ...
  • so927
  • so927
  • 2013年07月23日 18:55
  • 1622

几款GitHub安卓客户端的使用体验总结

作为一个热爱科学的青年,在知道了GitHub这样一个代码版本托管平台之后,真是爱不释手、喜不自胜。GitHub的网页和Windows客户端的简洁高效,让我这个一直坚信 “simple is beaut...
  • struggleforever
  • struggleforever
  • 2016年11月22日 12:50
  • 14060

ios-技术总结

1.列举cocoa中常见对几种多线程的实现并谈谈多线程安全的几种解决办法以及多线程安全怎么控制? 1>只在主线程中刷新UI 2>如果要防止资源抢夺 得用synchromized 进行枷锁保护 3...
  • u012701023
  • u012701023
  • 2015年10月04日 13:17
  • 389

手机客户端测试总结

系统测试(非功能性测试) 1、  适配性测试 a)         手机的型号 b)         网络通信情况(2G\3G\WIFI\飞行模式、NET\WAP、中国电信、移动、联通) c)...
  • u013152417
  • u013152417
  • 2015年03月09日 15:59
  • 1089

项目:××官网改版总结经验和收获

前端菜鸟一个项目的总结
  • u010313768
  • u010313768
  • 2015年09月01日 10:33
  • 779
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手机版官网技术总结(一)
举报原因:
原因补充:

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