码迷,mamicode.com
首页 > 移动开发 > 详细

移动项目前端小结(三)

时间:2019-11-13 16:26:40      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:需要   因此   als   poi   line   lock   restart   显示   click   

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

 

移动项目前端小结(三)

标签:需要   因此   als   poi   line   lock   restart   显示   click   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!