あなたの欲しい(Vue)は端点を移動して入力ボックスを打って、キーボードを弾いて、底は問題を突きつけられます

5713 ワード

あなたの欲しい(Vue)は端点を移動して入力ボックスを打って、キーボードを弾いて、底は問題を突きつけられます
問題の説明:
Vue開発では、親ビューの下部に対してサブコントロールをレイアウトする場合、position:fixedを使用する必要があります.ページの内容が長くなく、画面の範囲を超えていない場合は、問題ありません.画面範囲を超えると、入力ボックスをクリックしてキーボードをポップアップすると、下部の固定位置のサブコントロールが突き上げられます.この問題はiOS側では発生せず、Android側では発生します.キーボードのロード方法が異なるため、ここでは詳細を説明しません.
スタート
ステップ1:まずdataでレコードの高さを定義します.属性です.
data () {    
	return {        
		docmHeight: '0',  //             
		showHeight:  '0',   //              
		hidshow:true  //      footer,      
		isResize:false //              
	};  
},
ステップ2:reiszeイベントをvue mountedでマウントする方法が必要です
mounted() {    // window.onresize            
	 window.onresize = ()=>{        
		 return(()=>{                     
			 if (!this.isResize) {                               
				 //                                     
				 this.docmHeight: document.documentElement.clientHeight                                
				 this.isResize = true                       
			 }                        
				 //                              
				 this.showHeight = document.body.clientHeight         
		 })()    
	 }  
 },

第三歩:watchモニタリング比較、ボタンが表示されるかどうかを判断する
showHeight:function() {        
	if(this.docmHeight > this.showHeight){            
		this.hidshow=false        
	}else{            
		this.hidshow=true        
	}    
}
ステップ4:テンプレートにfooterにv-showを追加する
	<div class="footer" v-show="hidshow">
	
	        ,    ,       
	
	</div>
クリックジャンプ