日常开发过程中问题总结记录

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;

6.iOS移动端滚动不流畅问题

-webkit-overflow-scrolling: touch;

7.iOS移动端底部固定定位随页面滚动而闪烁

参考https://juejin.im/post/5b7ad44c518825430c7a5f9f

8.elementUI table表格固定列以及动态布局造成的列表错乱问题

1.重新计算table布局：
 this.$nextTick(()=>{
    this.$refs.table.doLayout()
 })
 2.把el-table-column上的key设成一个随机数Math.random()，每次表头设置完都要更新一下

9.移动端部分 Ios 微信 小米自带浏览器返回不刷新问题解决

window.addEventListener(‘pageshow’, () => {
// 需要更新数据的获取方法写在此处
})

10.手机锁屏导致 h5 任务停止，该方法监听并重新获取信息

window.addEventListener('visibilitychange', () => {
    // hidden 为锁屏隐藏状态，visible为重新显示状态
    if (document.visibilityState === 'visible') {  
         // 在此处再次拉新数据即可
    } else if (document.visibilityState === 'hidden') {

    }
});

11.ios 键盘输入完成部分不回弹，留有空白不可点击区域，须手动下拉方可

// 解决方法  将该方法绑定在输入框 onblur 事件即可
handleblur(event) {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'end',
            behavior: 'smooth'
        });
    }, 300);
}

12.页面监听回退一般采用此方法，但是部分ios微信低版本页面加载即触发popstate事件 （场景：想监听页面返回的地方）

// 解决方法   监听事件延迟注册 
setTimeout(() => {
    window.history.pushState(state, "", document.URL);
    window.addEventListener('popstate’, leaveHandler );
},200);