昨天做完 顺丰试用商城手机端页面 一期 10个
1.手机端首次加载的js文件，没有判断横屏，有点缺陷，另外网速不好会加载缓慢，导致整个页面样式乱掉
/**
* 手机页面自适应
*/
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 详解
当然手机端还可以 flex 布局商城 项目 主要 用了 arttemplate,之前用的 X-template,苦于没有好的文档，转战 arttemplate,语法很简单，另开一篇
之前公司有人封装了 ajax函数，一直沿用，
(function($){
$.controlCon = (function() {
//防止重复发送请求
var _remoteCallPreventReCommit = {};
//发送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);
}
//无论请求结果如何，一旦服务器响应必须清除请求状态
function _DeleteCommitTypeAfterCallback(callback, commitType, data) {
//先执行回调函数，如果没有定义不执行
if (typeof(callback) === 'function') {
callback(data);
}
//回调完毕，销毁代表本次请求的提交状态
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
};
// 覆盖默认设置
var newConfig = $.extend(defaultConfig, jsonBody);
// 处理兼容以前请求参数命名为"method",应尽量使用ajax的参数为"type"进行设置
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("请求正在发送中，请勿重复操作");
//请求正在发送中，请勿重复操作
return false;
} else {
//将请求状态置为正在发送中
_remoteCallPreventReCommit[commitType] = 1;
// 自动加上属性 "_"
if (newConfig.data) {
if (!newConfig.data.hasOwnProperty("_")) {
newConfig.data._ = new Date().getTime();
}
} else {
newConfig.data = {
_ : new Date().getTime()
}
}
//发送请求，回调成功后必须将请求状态清除
_ajax(newConfig, callback, commitType, errorHandler, beforeHandler);
}
}
}
})();
})(window.Zepto || window.jQuery);
整个项目中用的 最多的，就是此ajax，上拉加载，跳转，另外图片上传和回显
// 上拉加载
/**--------- 页面滚动到底部监听事件函数，当触发后执行回调函数返回结果前该监听事件将处于休眠状态，只有唤醒后才可以继续监听 --------- */
;(function($){
$.siteScroll = (function() {
// 当页面滚动到底部将执行回调函数，并同时加锁，防止重复执行回调函数
var sleep = false;
return {
/**
* 启动页面滚动到底部监听事件
* @param callback 为满足触发条件指定执行的回调函数
*/
listen : function(callback) {
alert("测试");
$(window).scroll(function() {
// 当前屏幕高度(可见区域高度)
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;
// 页面滚动到底部触发
if ($(window).height() + scrollTop == scrollHeight) {
if (sleep) { // 等待唤醒
return false;
}
sleep = true; // 正在执行回调函数，进入休眠状态
if (typeof callback === 'function') {
callback(); // 执行回调函数
}
}
});
},
/**
* 唤醒上一次触发回调事件后处于休眠状态的页面滚动监听事件
*/
wakeup : function() {
sleep = false; // 唤醒处于休眠状态的监听事件：满足条件继续执行回调函数
},
/**
* 使监听事件处于休眠状态
*/
sleep : function() {
sleep = true; // 使监听事件处于休眠状态
}
};
})();
})(window.Zepto || window.jQuery);
/**--------- end --------- */
/**============== 日期数值格式化 ===============**/
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 地址用了插件
之前项目 有标注图，现在没有，目测，被批，小伙伴发了一个工具 markman 免费版先使用
