手機版官網暫告一段落了，終於捨得花時間來總結一下手機版官網當中學到的知識點以及技術總結。
目前所在的公司是一家創業公司，公司規模雖然不大，可是環境仍是蠻不錯的，也比較年輕化，體制不僵硬，並且互聯網金融類的產品，我也很是喜歡。
這個手機版本的官網主要是用於從微信公共號打開瀏覽，所以適配都是按照微信來的。區別在於微信打開屏幕高度會把微信的頭部包含進去，因此網頁裏的內容的高度就要以此爲標準。javascript
| 開發時間 | 10天 |
|---|---|
| 新接觸的方向 | 優化、國際化、數據交互 |
| 新技術 | hammer.js / zepto.js / i18n |
我打算從用到的js框架講起–zepto.js
zepto.js和jQuery我以爲差很少，目前用到的API和方法裏沒有太大的差異，我對zepto最大的三點印象就是：
一、文件小，只有8K多
二、支持手機上的觸摸事件，應用於手機版web
三、不支持IE瀏覽器
看了一篇博客講了幾點區別，但我沒怎麼遇到，這裏貼一下連接
但聽說zepto.js上的觸摸事件不太好用，坑不少啊，沒直接嘗試，網上查了查，不少說zepto的touch事件存在問題，PS：提供一個zeptotouch觸摸事件的解決辦法，大體緣由我看了一下都跟事件冒泡有關，一般阻止事件冒泡後，又有一些滑動或者滾動不能被觸發，所以我果斷用了hammer.js，百度還有一個touch.js
，你們也能夠嘗試一下，文件超級小,當時我沒找到合適的demo來研究，因此選擇了hammer.js。css
//定義變量，注意這裏獲取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。html
| 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表示當前交互爲最後一次交互 |
//主要思想：經過改變絕對定位的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我分享在github上，有感興趣的同窗能夠去看 個人github
今天偶然發現hammer源碼裏寫了了阻止冒泡的方法。
在swipe、pan、tap、press事件裏，取消了阻止，在pinch和rotate事件里加了阻止。java
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的阻止冒泡？git