<meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'/>
###默认样式清除
html,body,h1,h2,h3,h4,h5,h6,p,span,div,ul,li,a,img{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
img{display: block;}
a,input,button{-webkit-tap-highlight-color: rgba(0,0,0,0);}
input{-webkit-appearance: none;outline: none;border: none;}
html,body{height: 100%;overflow: hidden;}
###CSS几个特别属性
外轮廓
input{
outline: none;
}
placeholder 字体颜色
::-webkit-input-placeholder{
color: #333;
}
获取焦点
:focus{
background: #fff;
}
高亮
-webkit-tap-highlight-color: rgba(0,0,0,0)
a伪类 hover link active visited lvha
a标签的href属性必须写,不写会改变a元素作为超链接的一些特有的属性
###绝对定位模拟固定定位
市场上移动端浏览器太多,有些低版本浏览器不支持固定定位,此时只能用绝对定位模拟固定定位
###清除系统滚动条
html,body{
height: 100%;
overflow: hidden;
}
###取消浏览器默认行为
document.addEventListener('touchstart',function(event){
event.preventDefault();
});
###文字省略号
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
###模拟屏幕区域
移动端项目一般不直接动用boby,用大的div或者section模拟屏幕区域,将所有元素包裹起来
###适配rem适配:
(function(){
var width = document.documentElement.clientWidth;
var styleNode = document.createElement('style');
styleNode.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
document.head.appendChild(styleNode);
})();
viewport适配:
(function(){
//320 目标屏幕宽度
var targetWidth = 320;
//375
var width = document.documentElement.clientWidth;
//比例
var scale = width / targetWidth;
//获取meta标签 属性选择器
var metaNode = document.querySelector('meta[name="viewport"]');
//覆盖操作
metaNode.setAttribute('content','initial-scale='+ scale +',user-scalable=no');
})();
###误触处理
描述:当我们拖动一个元素时,可能会对其中添加了监听事件的的元素产生点击后的影响。
1 touchmove过程中,不让事件进入
//误触
var flag = false;
liNodes[i].addEventListener('touchmove',function(){
if(!flag){
flag = true;
}
2 touchend中,如果flag为非,进入
liNodes[i].addEventListener('touchend',function(){
if(!flag){
//给每一个li ,添加class
for (var j=0;j<liNodes.length;j++) {
liNodes[j].className = ''
};
this.className = 'active';
}
3 执行完毕后,每一次重置flagflag = false;
###层级问题 z-index###点透处理
(function(){
var aNodes = document.querySelectorAll('a');
for(var i=0;i<aNodes.length;i++){
aNodes[i].addEventListener('touchstart',function(){
window.location.href = this.href;
});
};
})();
###防抖动(纵向和横向,此处以X方向为例)
描述:当手指在垂直方向滑动时,轮播图的图会发生位置的移动,此时应该禁止掉X轴方向的行为。
手指滑动时,可能会产生一次或者N次的touchmove事件
解决:
1 将touchmove分为第一次touchmove或者第N-1次
2 判断如果是第一次touchmove,如果disY>disX---跳出return---禁止之后的X轴发生的行为。
3 之后出现一个问题:当手指在轮播图上移动时,只有第一次X的行为被禁止
4 解决方案:如果X轴方向的行为已经被禁止,后面的行为逻辑全部不再执行
实现逻辑:
1 初步处理:首次滑动时,disY>disX,禁止掉X方向上面的逻辑
2 如果多次touchmove,定义两个变量
//判断第一次滑动
var isFirst = true;
//是否是在X轴上滑动
var isX = true;
3 在touchmove中,如果isFirst = true(证明我此时第一次进来),此时让我isFirst = false,
并且,一旦disY>disX,就禁止掉X轴上面的逻辑,isX = false;
4 当我多次touchmove,我要判断我上一次滑动的isX到底禁止还是没有禁止,如果isX = false,直接return。
5 当我第二次进入touchstart,需要清除掉上一次move中的isFirst和isX的状态,并把他们重新置回true
实战:
1 touchstart中设置第一次进入初始值和是否是X方向的初始值
isFirst = true;
isX = true;
2 touchmove中,禁止非第一次的touchmove逻辑
if(!isX){
return
};
3 touchmove中,确定位置逻辑之前设置防抖动
if(isFirst){
isFirst = false;
if(Math.abs(disY)>Math.abs(disX)){
console.log(1111)
isX = false;
//禁止X方向逻辑
return; // 只禁止第一次X方向逻辑
}
}
###禁止2d变换影响
解决:给需要移动的部分添加3D变换的效果 transformCss(elem,'translateZ',0.01);
注意:tabWrap添加的时候是一个数组,要放在循环的下面3D变化依靠的硬件,2d依靠软件
###即点即停
由于transition不能检测中间的过度行为,所以在即点即停状态时,使用Tween类检测中间状态
步骤:1 调用Tween,即点即停的逻辑在touchend中执行
var Tween={
Linear: function(t,b,c,d){ return c*t/d + b; },
easeOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
};
2 move(target,time,type);
3
function move(target,time,type){
//t : 当前次数
var t = 0;
//b : 起始位置
var b = transformCss(conList,'translateY');
//c : 结束位置与起始位置距离差
var c = target - b;
//d : 总次数
var d = time/0.01;
console.log(d);
//防止重复开启定时器
clearInterval(timer);
timer = setInterval(function(){
t++;
if(t > d){
//清除定时器
clearInterval(timer);
//如果callback执行,且callback的属性为end函数,执行end函数
if(callBack && typeof callBack['end']=='function'){
callBack.end();
};
}else{
//正常
var point = Tween [type](t,b,c,d);
transformCss(conList,'translateY',point);
if(callBack && typeof callBack['move']=='function'){
callBack.move();
};
};
},10);
};
(关于Tween:
http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html )
###移动端的聚焦事件 event.focus();
function getFocus(){
var inputNode = document.querySelector("#wrap #header .search input[type='text']")
inputNode.addEventListener('touchstart',function(event){
//获取焦点
inputNode.focus();
//取消冒泡
event.stopPropagation();
});
document.addEventListener('touchstart',function(){
//失去焦点
inputNode.blur();
})
};