ios对于fixed属性不兼容的解决方案

最近在做支付宝口碑项目的时候的，遇到的一个的ios对position:fixed不兼容的的问题的时候的同事给出了一个解决方案，此篇博客是我简述这个解决方案(我是基于vue的写法来讲解的)。

常见的需求的 是在屏幕底部定位一个div，然后里面有个的input的，此时的安卓出现的软键盘的会把这个定位的div推到上面去，但是得ios的情况吧fixed的效果失效的，或产生很大的间隔

现给出的解决的方案的，就在我们没有focus的时候的，这个div的属性不发生改变的，当我们focus的让这个div的fixed变成的absoluted(需在body修改)，blur的时候的又变成大fixed的

//html
<footer class='footer' id='footerFixed'>
<input @focus='addBodyClass' @blur='removeBodyClass'>
</div>

//css
#footerFixed{
position:fixed;
height:1rem;
width:100%；
bottom：0；
left:0;
}

//js
addBodyClass(){
console.info('add')
document.body.classList.add('full-body');//原生的写法
console.info(document.body.classList)
},
removeBodyClass(){
console.info('remove')
document.body.classList.remove('full-body')
},

//css
body {
&.full-body{
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
#footerFixed{
position: absolute;
}
}
}

对于classList的方法 ，我们可以从http://caniuse.com/#search=classList 查看兼容性

原文链接：http://blog.csdn.net/zhooson/article/details/75789659