あなたの欲しい(Vue)は端点を移動して入力ボックスを打って、キーボードを弾いて、底は問題を突きつけられます
5713 ワード
あなたの欲しい(Vue)は端点を移動して入力ボックスを打って、キーボードを弾いて、底は問題を突きつけられます
問題の説明:
Vue開発では、親ビューの下部に対してサブコントロールをレイアウトする場合、position:fixedを使用する必要があります.ページの内容が長くなく、画面の範囲を超えていない場合は、問題ありません.画面範囲を超えると、入力ボックスをクリックしてキーボードをポップアップすると、下部の固定位置のサブコントロールが突き上げられます.この問題はiOS側では発生せず、Android側では発生します.キーボードのロード方法が異なるため、ここでは詳細を説明しません.
スタート
ステップ1:まずdataでレコードの高さを定義します.属性です.
問題の説明:
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>
クリックジャンプ