移动端项目需要注意的事项-音乐台和相册小项目总结

###meta标签

   <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();
		})
		
	};