移动项目前端小结（三）

formdata上传注意点

　　formdata不能上传file类型的数据，但能上传blob；因此若需要上传文件时先转化为blob形式，再上传。

formData.append("filename", blob, `${file.name.split('.')[0]}.jpeg`);

文件类型数据转成URL(兼容性写法)

function getObjectURL(file){    
	var url=null;
	if(window.createObjectURL!=undefined){ // basic    
		url=window.createObjectURL(file);
	}else if(window.URL!=undefined){ // mozilla(firefox)    
		url=window.URL.createObjectURL(file); 
	} else if(window.webkitURL!=undefined){ // webkit or chrome    	
		url=window.webkitURL.createObjectURL(file);
	}    
	return url;  
}

微信浏览器中元素的背景图片问题

　　用微信浏览器打开html文件时背景图片无法显示，background-image、background：url()与图片相关的属性不起作用；

DOM元素绑定事件时传参

　　选中元素.bind('事件类型如：click',{参数名：参数值}，函数名如：submitcb)

　　函数中通过event的data属性获取传过来的参数值如：

function submitcb(event){
　　console.log(event.data.参数名)
}

移动端IOS10以上Safari页面不能禁止缩放问题

　　以下代码转载自：互联网学徒的掘金文章

window.onload=function () {
	document.addEventListener('touchstart',function (event) {
	  if(event.touches.length>1){
	    event.preventDefault();
	  }
	});
	var lastTouchEnd=0;
	document.addEventListener('touchend',function (event) {
	  var now=(new Date()).getTime();
	  if(now-lastTouchEnd<=300){
	    event.preventDefault();
	  }
	  lastTouchEnd=now;
	},false);
	document.addEventListener('gesturestart', function (event) {
	  event.preventDefault();
	});
}

　　注意：双击放大可以禁止，双指放大仍有bug

移动端用伪元素实现右箭头 >

　　参考自jquery weui框架

div::before{
	content: " ";
	display: inline-block;
	height: 6px;
	width: 6px;
	border-width: 2px 2px 0 0;
	border-color: #c8c8cd;
	border-style: solid;
	-webkit-transform: matrix(.71,.71,-.71,.71,0,0);
	transform: matrix(.71,.71,-.71,.71,0,0);
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -4px;
}

/*
matrix(-.71,.71,.71,.71,0,0)：左箭头 <
matrix(.71,-.71,.71,.71,0,0)：上箭头 
matrix(.71,.71,.71,-.71,0,0)：下箭头
*/

移动端用伪元素实现1px边框

　　在移动端若设置的边框大小为1px，效果看起来会比较粗，不像是1px，可以通过缩小达到目的。

div::after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e5e5e5;
    color: #e5e5e5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 2;
}

原文地址：https://www.cnblogs.com/mojimoji/p/11849260.html