本文主要是為了解決當(dāng)在手機底部書寫固定樣式時，用戶調(diào)用軟鍵盤棵红，會導(dǎo)致固定樣式被頂起莺禁，導(dǎo)致樣式錯位的問題。
1.HTML代碼
<div class="footer" v-show="showFooter"></div>
<style>
.footer{
width:100%;
height:10%;
/* position:fixed */
position:absolute;
bottom:10px;
}
</style>
2.vue.js代碼
// js 部分
<script>
export default {
data(){
return {
docmHeight: document.documentElement.clientHeight, //默認(rèn)屏幕高度
showHeight:'', //實時屏幕高度
hideshow:true, //顯示或者隱藏footer
}
},
mounted() {
// window.onresize監(jiān)聽頁面高度的變化
window.onresize = ()=>{
return(()=>{
this.showHeight = document.body.clientHeight;
})()
}
},
watch:{
showHeight:function() {
if(this.docmHeight > this.showHeight){
this.showFooter=false
}else{
this.showFooter=true
}
}
},
}
</script>
