[图片] [图片] 1.移动端弹出窗滚动穿透问题: showGiftAlert(){ this.isShowGift = true; let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; document.body. ..

日常开发过程中问题总结记录 (持续更新中......)

1.移动端弹出窗滚动穿透问题:

showGiftAlert(){ 
	this.isShowGift = true; 
	let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'; 
}, 
hideGift(){
 	this.isShowGift = false;
 	let body = document.body; body.style.position = '';
 	let top = body.style.top; 
	document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top); 
	body.style.top = ''; 
}

2.移动端 iphoneX 样式兼容

// iphoneX 
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) { 
	//样式部分
 }

3.iPad 端样式兼容处理

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { /* 竖屏*/ } 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { /*横屏 */ } 
@media all and (min-width: 800px){ /*宽度大于800*/ }
@media all and (min-height: 800px){ /*高度大于800*/ }

4.移动端 iphone5 以及部分安卓机型兼容性问题

按钮、输入框边框显示不全:更换为px单位,不支持rem单位

5.初始化获取页面数据接口进行赋值

1.使用extend关键字: extend(this.dataInfo,res.data); 
2.使用解构赋值 const { success, info, data } = returnData;
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    192 引用 • 1296 回帖
回帖
请输入回帖内容...