记录日常用到和实现的功能
HTML
1、弹出数字键盘
<!-- 数字带# * -->
<input type="tel" />
// 实现phone格式化 123 4567 8911 并且光标换位置插入或者删除控制光标到当前输入位置不会到最后
private phoneformat (value: string) {
let val = (this.$refs.inputPhone as any).value
let selStart = (this.$refs.inputPhone as any).selectionStart // 选中区域左边界位置
let mobileLen = val.length
let value = val.replace(/\D/g, '').substring(0, 11)
let len = value.length
if (len > 3 && len < 8) {
value = value.replace(/^(...)/g, '$1 ')
} else if (len >= 8) {
value = value.replace(/^(...)(....)/g, '$1 $2 ')
}
(this.$refs.inputPhone as any).value = value
if (selStart !== mobileLen) {
// 设置光标位置
(this.$refs.inputPhone as any).selectionStart = (this.$refs.inputPhone as any).selectionEnd = selStart
}
this.phone = (this.$refs.inputPhone as any).value
}
<!-- 纯数字 推荐-->
<input type="number" pattern="\d*"/>
2、常用唤起原生URL scheme
常用的URL Scheme
scheme://[path][?query]
「scheme」:应用标识,表示应用在系统里的唯一标识
「path」:应用行为,表示应用某个页面或功能
「query」:应用参数,表示应用页面或应用功能所需的条件参数
<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086</a>
<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086</a>
<!-- 打开微信 -->
<a href="weixin://">打开微信</a>
<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>
3、常用meta标签
<!-- 禁止缩放 -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- 禁止缓存 -->
<meta http-equiv="Cache-Control" content="no-cache">
<!-- 设置Safari全屏,在iOS7+无效 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 改变Safari状态栏样式,可选default/black/black-translucent,需在上述全屏模式下才有效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加页面启动占位图 -->
<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">
<!--保存网站到桌面时添加图标 ios和Android都支持-->
<link rel="apple-touch-icon-precomposed" href="/path/to/icon72x72@2x.png">
<!--仅Android支持-->
<link rel="icon" href="/path/to/icon72x72@2x.png">
<!-- 详细可参考 http://www.unclealan.cn/index.php/front/73.html -->
<!-- 保存网站到桌面时添加图标且清除默认光泽 -->
<link rel="apple-touch-icon-precomposed" href="pig.jpg">
4、chrome 小技巧 ,保持元素的hover状态
审查元素,选中a标签(或者需要hover的标签) 选择 force element state,选择相应的 :hover :active :focus :visited 等伪类
CSS
1、rem比例布局
// js方式
remAutoFontSize (width = 750) {
const target = document.documentElement
if (target.clientWidth >= 600) {
target.style.fontSize = "80px"
} else {
target.style.fontSize = target.clientWidth / width * 100 + "px"
}
}
remAutoFontSize()
window.addEventListener("resize", () => remAutoFontSize())
// html方式
html {
font-size: calc(100vw / 7.5);
}
@media screen and (max-width: 1024px) {
html {
font-size: calc(100vw / 7.5);
}
}
2、1px问题
// 1px空隙问题
.bgIcon {
width: 0.8rem;
height: 0.8rem;
background: url("bg.jpg") no-repeat center/100% 100%;
}
// rem下 1px宽度问题
.line {
margin: .32rem 0;
height: 1px;
transform: scaleY(0.5);
opacity: 0.8;
background: #dadae1;
}
3、媒体查询常用功能
/* @media all 所有介质下 竖屏 */
@media all and (orientation: portrait) {
/* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {
/* 自定义样式 */
}
4、iphonex安全区域适配头部&底部
详细参考 iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
padding-top: env(safe-area-bottom-height);
5、美化滚动占位
「::-webkit-scrollbar」:滚动条
「::-webkit-scrollbar-track」:轨道
「::-webkit-scrollbar-thumb」:滑块
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-image: linear-gradient(135deg, #09f, #3c9);
}
6、placeholder美化
.content input[class='addressText']::-webkit-input-placeholder {
color: #86878f;
font-weight: 400;
font-family: PingFangSC, PingFangSC-Regular;
}
.content textarea[class='addressTextArea']::-webkit-input-placeholder {
color: #86878f;
font-weight: 400;
margin-top: -0.02rem;
font-family: PingFangSC, PingFangSC-Regular;
}
7、line-height:nomal
line-height:nomal是怎么计算的
8、position: sticky 粘性布局 实现置顶
js
// copytoclipboard 复制到粘贴板
export default function (content: string, cb: Function) {
const aux = document.createElement('input')
aux.setAttribute('value', content)
document.body.appendChild(aux)
aux.select()
const res = document.execCommand('copy')
document.body.removeChild(aux)
if (res && cb) {
cb()
}
}