問題描述：Vue開發(fā)中，當(dāng)我們相對(duì)于父視圖的底部布局子控件時(shí)世澜，需要用position:fixed独旷，如果頁(yè)面內(nèi)容不是很長(zhǎng)，沒有超出屏幕范圍，那就還好嵌洼，沒有問題案疲；一旦超出屏幕范圍，當(dāng)你點(diǎn)擊輸入框麻养，彈出鍵盤時(shí)褐啡，底部固定定位的子控件就會(huì)被頂起來。
這個(gè)問題在iOS端不會(huì)出現(xiàn)鳖昌，在安卓端會(huì)出現(xiàn)备畦，原因是鍵盤加載方式不一樣，這里不作詳情解答许昨。
解決方案：在鍵盤彈起時(shí)懂盐，頁(yè)面高度變小，底部固定定位上升糕档，所以我們只需要在頁(yè)面高度變小時(shí)莉恼，隱藏底部子控件，當(dāng)鍵盤消失時(shí)再顯示底部子控件速那。
解決方法：檢測(cè)瀏覽器的resize事件俐银，當(dāng)高度過小時(shí)就可以判定為出現(xiàn)這種情況，這時(shí)把定位改成absolute或者直接隱藏掉之類的端仰。
第一步： 先在 data 中去 定義 一個(gè)記錄高度是 屬性
data () {
? ? return {
? ? ? ? docmHeight: '0',? //默認(rèn)屏幕高度
? ? ? ? showHeight: ?'0',? //實(shí)時(shí)屏幕高度
? ? ? ? hidshow:true? //顯示或者隱藏footer,
? ? ? ?isResize:false //默認(rèn)屏幕高度是否已獲取
? ? };
? },
第二步： 我們需要將?reisze 事件在 vue mounted 的時(shí)候 去掛載一下它的方法
mounted() {
????// window.onresize監(jiān)聽頁(yè)面高度的變化
????window.onresize = ()=>{
????????return(()=>{
? ? ? ? ? ? ? ? ? ? ?if (!this.isResize) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//默認(rèn)屏幕高度
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.docmHeight: document.documentElement.clientHeight?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?this.isResize = true
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? //實(shí)時(shí)屏幕高度
? ? ? ? ? ? ? ? ? ? ? ?this.showHeight = document.body.clientHeight?
????????})()
????}
??},
第三步：watch監(jiān)控比較捶惜，判斷按鈕是否該顯示出來
showHeight:function() {
????????if(this.docmHeight > this.showHeight){
????????????this.hidshow=false
????????}else{
????????????this.hidshow=true
????????}
????}
第四步：在模板中給footer添加v-show
<div class="footer" v-show="hidshow">
移動(dòng)端點(diǎn)擊輸入框，彈出鍵盤荔烧，底部被頂起問題
</div>
