1. 既存の問題: WeChat アプレットのチャット インターフェイスでは、入力ボックスにフォーカスがあると、携帯電話のキーボードが自動的にアクティブになり、キーボードがポップアップすると、ページ全体が上に移動し、ページ ヘッダーが表示されます。情報が消えてしまいます。
2. 得られる効果
1. キーボードがポップアップすると、下部の入力ボックスがキーボードに追従します
2. ページヘッダーが上部に固定されます 3. チャット情報領域 (つまり、コンテンツ領域) の高さが調整されますエリアが部分的にスクロールします。
レンダリングの比較
3. 解決策
1. ページが上に移動しないようにキーボードをポップアップに設定します。 2. 入力ボックスが配置されているボックスを絶対位置に設定します。 3. キーボードがポップアップしたときのキーボードの高さを取得します。 4.入力ボックスが配置されているボックスの底部のキーボードの高さ; 5. クリア 入力ボックスの固定位置によって引き起こされるフローティング (入力ボックスの上部ボックスの下に padding-bottom を設定します [高さはキーボードの高さと同じです)入力ボックス]; または、入力ボックスが配置されているボックスの上にブロック レベルの要素を追加します [高さは入力ボックスと同じです])** 注: **ここでは、メッセージ入力部分をコンポーネントにカプセル化して導入します。配置されている[ビュー]にキーボードの高さを親から渡す必要があるので、同じファイル内にある場合は、取得したキーボードの高さを[ボトム]に直接代入します]。#### 4. 実装コード
1. サブコンポーネントの入力
//子组件
<input class="TUI-message-input-area" :adjust-position="false" // 修改为 false，使键盘弹起页面不上移cursor-spacing="20"v-model="inputText" @input="onInputValueChange" maxlength="140" type="text"placeholder-class="input-placeholder" placeholder="请输入描述"@focus="inputBindFocus" // 添加获取焦点键盘弹起事件@blur="inputBindBlur"> // 添加失去焦点键盘隐藏事件 //重点在这里！！！一定要用 px！！！
methods: {inputBindFocus(e) {// 获取手机键盘的高度，赋值给input 所在盒子的 bottom 值// 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 pxthis.$emit('changeBottomVal' , e.detail.height +'px') },inputBindBlur({// input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0 this.$emit('changeBottomVal', 0)}, }
2. 親コンポーネントの参照
<view style="height: 200rpx;"></view>/**清除浮动**/
<view class="message-input " :style="{ bottom: bottomVal }">
<TUI-message-input ref="messageInput" :conversation="conversation" :isOrder="true"
@handleCall="handleCall" @sendMessage="sendMessage" @changeBottomVal="changeBottomVal">
</TUI-message-input>
</view>
<script> //引入输入框组件
import TUIMessageInput from "./components/chat/message-input/index";
export default {data() {return {bottomVal: '',}},
methods：{//键盘弹起事件changeBottomVal(val){this.bottomVal = val},
} </script>
<style lang="scss"> .message-input {position: absolute; // input 所在盒子设置绝对定位flex-shrink: 0;width: 100%;left: 0;bottom: 0;// 默认 0z-index: 199;padding-bottom: env(safe-area-inset-bottom);background: #FFFFFF;box-sizing: border-box;
} </style>
5. 概要:
取得したシステムのサイズ単位は px なので、bottom に設定する値の単位も px でなければなりません! 携帯電話だからといって rpx を使用することはできません。すべての携帯電話が同じであるわけではないため、rpx の 2 倍は受け入れられません。解像度は私たちのものと同じです。設計図の 375 の 2 倍、必ず px を使用してください。
やっと
最近ではJavaScriptとESのノート、合計25個の重要な知識を整理し、それぞれの知識を解説・分析しました。JavaScriptとESの関連知識を素早く習得し、作業効率を向上させることができます。
困っている友達は、下のカードをクリックして無料で受け取って共有できます