昨天做完 順豐試用商城手機端頁面 一期 10個
1.手機端首次加載的js文件，沒有判斷橫屏，有點缺陷，另外網(wǎng)速不好會加載緩慢，導(dǎo)致整個頁面樣式亂掉
/**
* 手機頁面自適應(yīng)
*/
var b = document.documentElement,
a = function() {
var a = b.getBoundingClientRect().width;
if (a > 800) a = 800; // 屏幕寬度最大為800px
b.style.fontSize =(.0375 * a) + "px";
},
c = null;
window.addEventListener("resize",
function() {
clearTimeout(c);
c = setTimeout(a, 300);
});
a();
項目用的 百分比 和 純rem，連字體也是,
此處貼幾個rem用法，原理的鏈接
viewport
rem
rem 詳解
當(dāng)然手機端還可以 flex 布局商城 項目 主要 用了 arttemplate,之前用的 X-template,苦于沒有好的文檔，轉(zhuǎn)戰(zhàn) arttemplate,語法很簡單，另開一篇
之前公司有人封裝了 ajax函數(shù)，一直沿用，
(function($){
$.controlCon = (function() {
//防止重復(fù)發(fā)送請求
var _remoteCallPreventReCommit = {};
//發(fā)送ajax請求
function _ajax(newConfig, callback, commitType, errorHandler, beforeHandler) {
var handler = {
beforeSend : function() {
if (typeof(beforeHandler) === 'function') {
beforeHandler();
}
},
success : function(data) {
_DeleteCommitTypeAfterCallback(callback, commitType, data);
},
error : function() {
_DeleteCommitTypeAfterCallback(errorHandler, commitType);
}
};
newConfig = $.extend(handler, newConfig);
$.ajax(newConfig);
}
//無論請求結(jié)果如何，一旦服務(wù)器響應(yīng)必須清除請求狀態(tài)
function _DeleteCommitTypeAfterCallback(callback, commitType, data) {
//先執(zhí)行回調(diào)函數(shù)，如果沒有定義不執(zhí)行
if (typeof(callback) === 'function') {
callback(data);
}
//回調(diào)完畢，銷毀代表本次請求的提交狀態(tài)
delete _remoteCallPreventReCommit[commitType];
}
return {
remoteCall : function(jsonBody, callback, errorHandler, beforeHandler) {
var _url = jsonBody.url;
var defaultConfig = {
type : "POST",
dataType : "json",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
timeout: 300000
};
// 覆蓋默認(rèn)設(shè)置
var newConfig = $.extend(defaultConfig, jsonBody);
// 處理兼容以前請求參數(shù)命名為"method",應(yīng)盡量使用ajax的參數(shù)為"type"進行設(shè)置
if(newConfig.method){
newConfig.type = newConfig.method;
delete newConfig.method;
}
//校驗url和action是否漏掉
if (!_url) {
window.console && console.log("url和action不能為空！");
return false;
}
var commitType = _url;
if (_remoteCallPreventReCommit[commitType]) {
window.console && console.log("請求正在發(fā)送中，請勿重復(fù)操作");
//請求正在發(fā)送中，請勿重復(fù)操作
return false;
} else {
//將請求狀態(tài)置為正在發(fā)送中
_remoteCallPreventReCommit[commitType] = 1;
// 自動加上屬性 "_"
if (newConfig.data) {
if (!newConfig.data.hasOwnProperty("_")) {
newConfig.data._ = new Date().getTime();
}
} else {
newConfig.data = {
_ : new Date().getTime()
}
}
//發(fā)送請求，回調(diào)成功后必須將請求狀態(tài)清除
_ajax(newConfig, callback, commitType, errorHandler, beforeHandler);
}
}
}
})();
})(window.Zepto || window.jQuery);
整個項目中用的 最多的，就是此ajax，上拉加載，跳轉(zhuǎn)，另外圖片上傳和回顯
// 上拉加載
/**--------- 頁面滾動到底部監(jiān)聽事件函數(shù)，當(dāng)觸發(fā)后執(zhí)行回調(diào)函數(shù)返回結(jié)果前該監(jiān)聽事件將處于休眠狀態(tài)，只有喚醒后才可以繼續(xù)監(jiān)聽 --------- */
;(function($){
$.siteScroll = (function() {
// 當(dāng)頁面滾動到底部將執(zhí)行回調(diào)函數(shù)，并同時加鎖，防止重復(fù)執(zhí)行回調(diào)函數(shù)
var sleep = false;
return {
/**
* 啟動頁面滾動到底部監(jiān)聽事件
* @param callback 為滿足觸發(fā)條件指定執(zhí)行的回調(diào)函數(shù)
*/
listen : function(callback) {
alert("測試");
$(window).scroll(function() {
// 當(dāng)前屏幕高度(可見區(qū)域高度)
var clientHeight = document.documentElement.scrollTop == 0
? document.body.clientHeight
: document.documentElement.clientHeight;
// 滾動距離
var scrollTop = document.documentElement.scrollTop == 0
? document.body.scrollTop
: document.documentElement.scrollTop;
// 底部距離頂部的高度(偏移量)
var scrollHeight = document.documentElement.scrollTop == 0
? document.body.scrollHeight
: document.documentElement.scrollHeight;
// 頁面滾動到底部觸發(fā)
if ($(window).height() + scrollTop == scrollHeight) {
if (sleep) { // 等待喚醒
return false;
}
sleep = true; // 正在執(zhí)行回調(diào)函數(shù)，進入休眠狀態(tài)
if (typeof callback === 'function') {
callback(); // 執(zhí)行回調(diào)函數(shù)
}
}
});
},
/**
* 喚醒上一次觸發(fā)回調(diào)事件后處于休眠狀態(tài)的頁面滾動監(jiān)聽事件
*/
wakeup : function() {
sleep = false; // 喚醒處于休眠狀態(tài)的監(jiān)聽事件：滿足條件繼續(xù)執(zhí)行回調(diào)函數(shù)
},
/**
* 使監(jiān)聽事件處于休眠狀態(tài)
*/
sleep : function() {
sleep = true; // 使監(jiān)聽事件處于休眠狀態(tài)
}
};
})();
})(window.Zepto || window.jQuery);
/**--------- end --------- */
/**============== 日期數(shù)值格式化 ===============**/
Date.prototype.format = function (format) {
if(!format){ // format="yyyy-MM-dd hh:mm:ss";
format='yyyy-MM-dd';
}
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4
- RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
};
輪播用的 swiper.js 地址用了插件
之前項目 有標(biāo)注圖，現(xiàn)在沒有，目測，被批，小伙伴發(fā)了一個工具 markman 免費版先使用
