フレームワーク: uniapp vue2
問題: テキストエリアの入力ボックスをクリックすると、ソフト キーボードが開き、ページが上に押し上げられます。フォーカスを失うと、ソフト キーボードは閉じますが、ページは押し上げられたままで、手動で引き下げることができません。
解決策:
簡単な説明: 入力ボックスがフォーカスを失ったときにトリガーされるメソッドを呼び出します。公式のメソッドがあります。フォーカスが外れたとき、ソフトキーボードを開いたときの高さをページの高さに割り当て、ページのスクロール位置を制御するメソッドも公式に用意されています。
注意
ページの高さを取得するには様々な方法がありますが、通常のページ(非nvue、v-if、親子コンポーネント)では公式のライフサイクル(onPageScroll)を使用して高さを監視できますが、私のページはv-ifの条件判定を使用してレンダリングされているため、scroll-viewコンポーネントのscrollメソッドを使用して監視しています。
<scroll-view v-else-if="showPage === 'happen'" scroll-y @scroll="scroll">
......
<textarea @blur="textBlur"/>
......
</scroll-view>
scroll(event) {
this.scrollTopPX = event.detail.scrollTop
},
textBlur() {
uni.pageScrollTo({
scrollTop: this.scrollTopPX,
duration: 300,
})
},