uniapp點擊輸入框時鍵盤不上推頁面

adjust-position設置為false,然后監聽鍵盤的高度賦值給輸入框bottom

這里還一個非常重要的地方,在根元素設置@touchmove.stop.prevent,這樣在ios上頁面就不會滾動,不影響其他組件內部滾動

onReady() {// 監聽鍵盤高度變化,以便設置輸入框的高度uni.onKeyboardHeightChange(res => {this.inputOffsetBottom = res.heightif (res.height === 0) {this.focus = false}})
},<inputv-model="commentValue":style="{bottom: inputOffsetBottom > 0 ? inputOffsetBottom + 'px' : '0'}":disabled="setDisabled":adjust-position="false":cursor-spacing="20":placeholder="placeholderText"type="text"class="lp-comment-input"confirm-type="send"@focus="onInputFocus"@blur="onInputBlur"@confirm="onInputEnter"@keyboardheightchange="onKeyBoardHeightChange"
/>

一,頁面結構設計
先來看看聊天頁面結構設計,外層布局如下:

<template><view><!-- 消息列表 --><scroll-view class="msg-list" scroll-y="true"></scroll-view><!-- 底部輸入欄 --><view class="input-box"><input :adjust-position="false"/></view></view>
</template>?


之后底部這個輸入欄,我們不要使用fixed定位,而是直接按照文檔流排列,那如何讓輸入欄一直在最下面呢,這就是我們下一步操作啦。

注意:這里的input或者textarea需要設置一個:adjust-position="false"的屬性,不然頁面就會上推

二,定義消息列表高度
我們需要獲取屏幕高度,然后使“消息列表”的高度為屏幕高度減去底部輸入欄高度

<!-- ...... --><!-- 消息列表 --><scroll-view class="msg-list" scroll-y="true" :style={ height: msgListHeight }></scroll-view>
<!-- ...... -->?
onLoad() {// 獲取並設置屏幕高度uni.getSystemInfo({success: res => {this.screenHeight = res.windowHeight// 100為底部輸入欄高度,單位rpx,需要先轉成pxthis.msgListHeight = this.screenHeight - uni.upx2px(100)}})
}

?
三,監聽鍵盤高度變化事件
下一步,需要監聽鍵盤高度變化事件,并且動態設置消息列表高度

 
onReady() {// 監聽鍵盤高度變化,以便設置輸入框的高度uni.onKeyboardHeightChange(res => {let keyBoardHeight = res.height// 100為底部輸入欄高度,單位rpx,需要先轉成pxthis.msgListHeight = this.screenHeight - keyBoardHeight - uni.upx2px(100)})
},


四,優化
做到以上三步一般可以解決上面頁面上推問題,剩下的就是不同項目不同的優化方案啦。
?

-------------------------------------------------------------------------

?

3、遇到問題
  當我獲取鍵盤高度定位時,發現底部定位的元素總是跟軟鍵盤間隔一段距離。安卓和ios手機均是如此。就如這樣:

4、問題原因
  這是因為手機屏幕底部存在虛擬鍵位,虛擬鍵位是占了軟鍵盤高度,占了屏幕高度,但是不占屏幕可使用窗口高度的

5、解決方案
  知道了原因,其實問題就很好解決了。

  uni.getSystemInfo(OBJECT):獲取系統信息。

  我們可以通過該接口獲取到系統信息里的:screenHeight(屏幕高度)、windowHeight(可使用窗口高度)

  兩者相減即為虛擬鍵位高度:keyHeight = screenHeight - windowHeight

  然后獲取到的軟鍵盤高度 減去 虛擬鍵位高度即可得到定位的高度

setKeyHeight(obj) {
  let _sysInfo = uni.getSystemInfoSync()
  let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
  let _diff = obj.height - _heightDiff
  this.keyHeight = _diff > 0 ? _diff : 0
?
  在iphone上有這樣的問題,就是上面的obj.height在鍵盤隱藏時為0,這個時候就會出現負值,所以需要判斷下
?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/35003.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/35003.shtml
英文地址,請注明出處:http://en.pswp.cn/news/35003.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Redis集群 (三十九)

提示&#xff1a;文章寫完后&#xff0c;目錄可以自動生成&#xff0c;如何生成可參考右邊的幫助文檔 目錄 前言 一、Redis主從復制 1.1 概念 1.2 作用 1.3 缺點 1.4 流程 1.5 搭建 1.6 驗證 二、Reids哨兵模式 2.1 概念 2.2 作用 2.3 缺點 2.4 結構 2.5 搭建 2.6 驗證 三、Red…

confluent-kafka 和kafka-python操作kafka,并封裝成一個類

為了向Kafka集群生產和消費消息&#xff0c;我們可以使用confluent-kafka庫&#xff0c;它是Confluent為Python提供的官方Kafka客戶端。以下是一個簡化的示例&#xff0c;展示如何將Kafka的生產者和消費者操作封裝到一個類中&#xff1a; 首先&#xff0c;確保你已經安裝了所需…

解決nvm安裝后,node生效但npm無效

問題描述 nvm安裝后&#xff0c;node生效但npm無效 清除緩存 C:\Users\cc\AppData\Roaming cc是我的用戶名改成你自己的就行刪除 npm和npm-cache

form表單構造http請求的寫法

from是html的一個標簽&#xff0c;from是html后早http請求的一種方式&#xff0c;它和input標簽密切配合。 from有兩個基本屬性action和method&#xff0c;action就是http請求url中的路徑部分。method就是構造的http請求的方法。 form和input標簽配合構造鍵值對&#xff0c;鍵值…

批量將excel文件合并

要批量合并多個Excel文件&#xff0c;可以按照以下步驟進行操作&#xff1a; 1. 導入所需的Python庫&#xff1a;首先&#xff0c;您需要導入pandas庫來處理Excel文件。 import pandas as pd 2. 定義文件路徑和輸出文件名稱&#xff1a; input_folder "your_input_fo…

如何在Vue中實現模板渲染優化?什么是Vue的雙向數據綁定原理?

1、如何在Vue中實現模板渲染優化&#xff1f; 在Vue中實現模板渲染優化&#xff0c;有以下幾個方法&#xff1a; 使用計算屬性&#xff08;computed properties&#xff09;代替方法&#xff08;methods&#xff09;&#xff1a;計算屬性會在首次渲染時進行計算&#xff0c;并…

數據結構筆記--二叉樹經典高頻題

1--二叉樹的最近公共祖先 主要思路&#xff1a; 最近祖先只有兩種情況&#xff1a;① 自底向上&#xff0c;當兩個目的結點分別在當前結點的左右子樹時&#xff0c;當前結點為兩個目的結點的最近祖先&#xff1b;② 最近祖先與其中一個目的結點相同&#xff0c;則另一個目的結點…

Python-OpenCV中的圖像處理-形態學轉換

Python-OpenCV中的圖像處理-形態學轉換 形態學轉換腐蝕膨脹開運算閉運算形態學梯度禮帽黑帽形態學操作之間的關系 形態學代碼例程 形態學轉換 形態學操作:腐蝕&#xff0c;膨脹&#xff0c;開運算&#xff0c;閉運算&#xff0c;形態學梯度&#xff0c;禮帽&#xff0c;黑帽等…

企業微信 企業內部開發 學習筆記

官方文檔 文檔 術語介紹 引入pom <dependency><groupId>com.github.binarywang</groupId><artifactId>wx-java-cp-spring-boot-starter</artifactId><version>4.5.3.B</version></dependency>核心代碼 推送消息 final WxCp…

面試攻略,Java 基礎面試 100 問(十一)

抽象類&#xff08;abstract class&#xff09;和接口&#xff08;interface&#xff09;有什么異同? 抽象類和接口都不能夠實例化&#xff0c;但可以定義抽象類和接口類型的引用。一個類如果繼承了某個抽象類或者實現了某個接口都需要對其中的抽象方法全部進行實現&#xff…

SpringBoot 后端項目利用 Minio 實現分片上傳、斷點續傳

一、準備工作 安裝 Minio 服務后&#xff0c;在 SpringBoot 項目中添加依賴&#xff1a; <!-- MinIO --><dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.2.1</version></dependency&g…

【js】日期、時間正則匹配

1、日期的正則表達式 格式&#xff1a;2023-08-11 var reg /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/; var regExp new RegExp(reg); if(!regExp.test(value)){alert("日期格式不正確");return; }2、時間的正則表達式 格式&#xff1a;23:00:00…

英碼國產高配邊緣計算盒子上市!搭載TPU處理器BM1684X,適配麒麟系統,支持OTA升級!

隨著人工智能技術不斷深入實際應用場景&#xff0c;加速各行各業場景應用落地&#xff0c;邊緣計算的重要性越發凸顯。相較于傳統的集中式云計算&#xff0c;邊緣計算在距離數據源或用戶更近的地方提供計算能力&#xff0c;不僅滿足了對實時性要求較高的場景應用需求&#xff0…

操作系統結構

操作系統結構 分層法模塊化宏內核微內核微內核的基本概念微內核的基本功能 內核 分層法 分層法是將操作系統分為若干層&#xff0c;最底層為硬件&#xff0c;最高層為用戶接口&#xff0c;每層只能調用緊鄰它的底層的功能和服務&#xff08;單向依賴&#xff09; 分層法的優點…

如何通過CSS選擇器選擇一個元素的子元素?如何選擇第一個子元素和最后一個子元素?

聚沙成塔每天進步一點點 ? 專欄簡介? 選擇一個元素的子元素? 選擇第一個子元素和最后一個子元素? 注意事項? 寫在最后 ? 專欄簡介 前端入門之旅&#xff1a;探索Web開發的奇妙世界 記得點擊上方或者右側鏈接訂閱本專欄哦 幾何帶你啟航前端之旅 歡迎來到前端入門之旅&…

線程池,以及線程池的實現以及面試常問的問題,工廠模式,常見的鎖策略(面試常考,要了解,不行就背)

一、&#x1f49b; 線程池的基本介紹 內存池&#xff0c;進程池&#xff0c;連接池&#xff0c;常量池&#xff0c;這些池子概念上都是一樣的&#xff5e;&#xff5e; 如果我們需要頻繁的創建銷毀線程&#xff0c;此時創建銷毀的成本就不能忽視了&#xff0c;因此就可以使用線…

Java中使用instanceof判斷對象類型

記錄&#xff1a;470 場景&#xff1a;Java中使用instanceof判斷對象類型。例如在解析JSON字符串轉換為指定類型時&#xff0c;先判斷類型&#xff0c;再定向轉換。在List<Object>中遍歷Object時&#xff0c;先判斷類型&#xff0c;再定向轉換。 版本&#xff1a;JDK 1…

Redis系列(一):深入了解Redis數據類型和底層數據結構

Redis有以下幾種常用的數據類型&#xff1a; redis數據是如何組織的 為了實現從鍵到值的快速訪問&#xff0c;Redis 使用了一個哈希表來保存所有鍵值對。 Redis全局哈希表&#xff08;Global Hash Table&#xff09;是指在Redis數據庫內部用于存儲所有鍵值對的主要數據結構。…

安卓13不再支持PPTP怎么辦?新的連接解決方案分享

隨著Android 13的發布&#xff0c;我們迎來了一個令人興奮的新品時刻。然而&#xff0c;對于一些用戶而言&#xff0c;這也意味著必須面對一個重要的問題&#xff1a;Android 13不再支持PPTP協議。如果你是一個習慣使用PPTP協議來連接換地址的用戶&#xff0c;那么你可能需要重…

C++ 泛型編程:函數模板

文章目錄 前言一、什么是泛型編程二、函數模板三、函數模板的使用四、多參數函數模板五&#xff0c;示例代碼&#xff1a;總結 前言 當需要編寫通用的代碼以處理不同類型的數據時&#xff0c;C 中的函數模板是一個很有用的工具。函數模板允許我們編寫一個通用的函數定義&#…