记录移动端H5页面遇到的坑 scrollTop兼容等 ios和安卓移动端网页兼容 键盘收回后页面不回滚 多个toast兼容 IOS底部回滚导航高度

一、一键回到顶部

超管用，O(∩_∩)O哈哈~

window.scrollTo(0,0);

二、关于存储方面的兼容问题

IOS清除微信缓存和安卓清除微信缓存，略有不同。
IOS清除微信缓存并没有把网页内sessionStorage清除掉，但是安卓可以。此处需要增加额外判断条件。

三、刷新页面保存状态管理器 store里面的数据

在APP.vue页面 create方法中加入

created(){
        //在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem("store") ) {
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        }
        //在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener("beforeunload",()=>{
            sessionStorage.setItem("store",JSON.stringify(this.$store.state))
        })
    },

四、IOS 7/7P以下 键盘收回后页面不回滚，造成页面卡死以及按钮错位

此处只需要一行代码即可，在输入框失去焦点事件中让页面回滚到顶部即可

<input @blur="memoBlur" @input="onMemoInput" class="memo" type="text" placeholder="请输入备注（非必填）">

memoBlur(){
	         window.scrollTo(0,0);
	      },

五、VANT toast组件 多个吐司同时展示 多个吐司兼容

//在main.js中，在本项目中我是按需引入组件的；
import { Toast } from 'vant';
Toast.allowMultiple();

//在其他vue页面中，先定义一个toast基本样式，再在需要调用的地方，直接输入message内容即可
//第一步：定义
let toastTips = this.$toast.loading({
                message: '',
                forbidClick: true,
            });
//第二步： 使用的地方
toastTips.message = "loading的提示信息";

//最后，如果吐司太多，比较乱的话，还可以在需要的地方调用 clear;
toastTips.clear();

六、IOS底部回滚空白处影响页面滚动高度，遮挡主页面内容

由于我们的项目在页面左侧有一个滚动菜单，所以进页面后会计算可视高度，故在此如果多余一个回滚导航栏，会遮挡部分内容，于是我们选择在页面mounted事件中加了一个500毫秒的延时，问题即可解决。

setTimeout(()=>{
                let screen_height = window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;
                screen_height = screen_height-11*14-70;
                console.log("screen_height===",screen_height);
            },500);

未完待续……，如有错误，欢迎指正