1、移动端页面上下滑动时发生卡顿的情况,很不流畅
在该元素的css上添加以下样式
{
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
2、扫描二维码时,判断扫描容器
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
... //微信
} else if (ua.match(/AlipayClient/i) == 'alipayclient') {
... //支付宝
}
3、input输入框在得到焦点时,去掉外边框默认颜色
input:focus { outlint: none; }
4、移动端常显滚动条,并调整滚动条样式
假设要显示滚动条的元素是.list,示例如下:
.list {
overflow: hidden;
overflow: auto;
height: 100px;
}
.list::-weblit-scrollbar-track-piece { //内层轨道
background-color: rgba(0,0,0,0);
border-left: 1px solid rgba(0,0,0,0);
}
.list::-webkit-scrollbar { //滚动条整体样式
width: 5px;
height: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.list::-webkit-scrollbar-thumb { //滚动条里的小方框
background-color: rgba(0,0,0,0);
background-clip: padding-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 28px;
}
.list::-weblit-scrollbar-track { //滚动条里的轨道
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.list {
background-color: rgba(0,0,0,0.5);
background-clip: padding-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
5、禁止复制选中文本
element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
6、JavaScript获取URL中的参数
适应以下两种模式,来获取url参数值:
/User/vip_card_manager/useless/219/id/18
/User/vip_card_manager?useless=219&id=18
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
var r = window.location.search.substr(1).match(reg);
var q = window.location.pathname.substr(1).match(reg_rewrite);
if(r != null){
return unescape(r[2]);
}else if(q != null){
return unescape(q[2]);
}else{
return null;
}
}
console.log(getQueryString("useless"));
7、动态插入script,并在加载完成执行callback
function loadScript(url, callback) {
let script = document.createElement('script');
if (script.readyState) { // IE
script.onreadystatechange = function () {
if (script.readyState === 'loaded' || script.readyState === 'complete') { //IE浏览器
script.onreadystatechange = null;
callback();
}
}
} else { // 其他浏览器
script.onload = function () {
callback();
}
}
script.src = url;
document.getElementsTagName('head')[0].appendChild('script');
}
readyState有几种状态,但是有些状态会被跳过,按顺序如下:
- 0 uninitialized - 还未开始载入
- 1 loading - 载入中
- 2 loaded
- 3 interactive - 已加载,文档与用户可以开始交互
- 4 complete - 载入完成
8、长时间按住页面出现闪退
element {
-webkit-touch-callout: none;
}
9、去除移动端输入框默认内阴影
element {
-webkit-appearance: none;
}
10、去除移动端点击元素时出现半透明的遮罩
element {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}