解決uniapp,textarea拉起頁面被頂起和鍵盤被輸入框遮擋的問題。

1:Android、ios 同時解決;

2:我們在開發的時候會發現textarea或者input拉起鍵盤的時候整個頁面被頂起了,header也被頂沒了;官方給了:adjustPosition='false'屬性,設置完之后頁面就不會被頂起,但是鍵盤把輸入框擋住了,就很惡心;

3:我的實現思路是,adjustPosition='false' ;用@keyboardheightchange監聽鍵盤的高度;在textarea下面給一個view標簽并且加高度;再通過uni.pageScrollTo 在鍵盤拉起的時候上滑頁面;

上代碼
<!-- 你的其他dom元素 寫多少都可以 --><view><textarea  border='none' :adjustPosition='false'   placeholder="請輸入200字以內的申請人意見" count maxlength='500' @keyboardheightchange='keyboardheightchange' style="width: 100%;"   @blur="hideBorad"></textarea><view :style="{'height':(showKeyNum==1?400:keyboardHeight)+'rpx'}"> </view>
</view>
 export default{data() {return { keyboardHeight: 0, // 鍵盤高度showKeyNum: 0,//鍵盤打開的次數}},methods: {keyboardheightchange(e) {this.keyboardHeight = e.detail.height;this.showKeyNum++;setTimeout(() => {uni.pageScrollTo({scrollTop: 2000});}, 200)},hideBorad() {this.showKeyNum = 2;this.keyboardHeight = 0;}}}

1:解釋一下為什么要設置鍵盤打開的次數:是因為keyboardheightchange第一次拉起的時候鍵盤的高度監聽不到,所以當等于1 的時候給了一個默認的高度;

2;?@blur="hideBorad" 為什么要設置這個事件,是因為Android系統下keyboardheightchange關閉的時候不觸發;

3:真的是各種坑等著你跳,大家有好的方法也可以提供過來;謝謝參考!

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

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

相關文章

談談SQL優化

SQL優化是數據庫性能優化中的關鍵環節&#xff0c;旨在提高查詢執行的效率和響應速度。下面是一些常見的SQL優化技巧和策略&#xff0c;涵蓋索引、查詢設計、表結構設計等方面&#xff1a; 1. 索引優化 創建索引&#xff1a;為常用查詢的過濾條件&#xff08;WHERE 子句&…

了解json

一.什么是json 1.什么是json是一種輕量級的數據交互&#xff0c;可以按照指定的json格式去組織和封裝數據 2.json本質上是一個帶有特定格式的字符串 二.json主要功能&#xff1a;json就是一種在各個編程語言中流通的數據格式&#xff0c;負責不同語言中的數據傳遞和交互&…

【Python時序預測系列】基于CNN+Bi-LSTM實現單變量時間序列預測(案例+源碼)

這是我的第309篇原創文章。 一、引言 基于CNN&#xff08;卷積神經網絡&#xff09;和Bi-LSTM&#xff08;雙向長短期記憶網絡&#xff09;的單變量時間序列預測是一種結合空間特征提取和時間依賴建模的方法。以下是一個基于Python和TensorFlow/Keras實現的示例&#xff0c;展…

C++ 高頻面試題

C 初級面試題及其詳細解答 1. 解釋 C 中的基本數據類型。 解答&#xff1a; C 提供了幾種基本數據類型&#xff0c;包括&#xff1a; int&#xff1a;整型&#xff0c;用于存儲整數。float 和 double&#xff1a;浮點型&#xff0c;用于存儲小數。char&#xff1a;字符型&am…

Android 強制使用移動網絡訪問接口

Android 強制使用移動網絡訪問接口_安卓連接wifi強制使用移動數據-CSDN博客 Android應用層實現恢復出廠設置功能_android7 intent 打開恢復出廠設置-CSDN博客

YOLOv8改進 | 主干網絡| 可變形卷積網絡C2f_DCN【CVPR2017】

&#x1f4a1;&#x1f4a1;&#x1f4a1;本專欄所有程序均經過測試&#xff0c;可成功執行&#x1f4a1;&#x1f4a1;&#x1f4a1; 專欄目錄&#xff1a;《YOLOv8改進有效漲點》專欄介紹 & 專欄目錄 | 目前已有40篇內容&#xff0c;內含各種Head檢測頭、損失函數Loss、B…

java SQL server 多實例的情況

而對于java&#xff0c;對付多個數據庫實例就有些要注意的了&#xff1a; 首先&#xff0c;同樣連接字符串上加上“\實例名”&#xff1a; jdbc:sqlserver://127.0.0.1\\mssqlserver2008;DatabaseNameLPT; 此處應去掉端口1433。因為連接數據庫自命名實例的url中沒有端口號1433…

SiLM585x系列SiLM5851NHCG-DG一款具有分離的管腳輸出 單通道隔離驅動器 擁有強勁的驅動能力

SiLM585x系列SiLM5851NHCG-DG是一款單通道隔離驅動器&#xff0c;具有分離的管腳輸出&#xff0c;提供3.0A源電流和6.0A灌電流。主動保護功能包括退飽和過流檢測、UVLO、隔離故障報警和 2.5A 米勒鉗位。輸入側電源的工作電壓為3V至5.5V&#xff0c;輸出側電源的工作電壓范圍為1…

獨孤思維:研發的新賺錢項目,活脫脫掉了幾層皮

01 今天有個讀者問我&#xff0c;xx項目&#xff0c;成功概率多少&#xff1f; 其實這和做這個項目&#xff0c;能賺多少錢&#xff0c;本質是一個問題。 即&#xff0c;有多大的確定性。 言外之意&#xff0c;沒有確定性&#xff0c;不穩定&#xff0c;我就不做了。 可以…

一位軟件測試工程師繁忙的一天

早晨&#xff1a;啟動一天的工作 7:00 AM - 起床 早晨七點準時起床。洗漱、早餐后&#xff0c;檢查了手機上的郵件和消息&#xff0c;了解今天的工作安排和優先事項。 8:00 AM - 前往公司 乘坐地鐵前往公司。在地鐵上&#xff0c;他習慣性地閱讀一些技術博客&#xff0c;了解…

小柴沖刺嵌入式系統設計師系列總目錄

工作兩年 逐漸意識到基礎知識的重要性?? 意識到掌握了這個證書好像就已經掌握了80%工作中用到的知識了。剩下的就在工作的實戰中學習 來和小柴一起沖刺軟考吧&#xff01;加油&#x1f61c; 【小柴沖刺軟考中級嵌入式系統設計師系列】總目錄 前言 專欄目標&#xff1a;沖刺…

涵蓋多項功能的文件外發系統,了解一下

伴隨著業務范圍的不斷擴大&#xff0c;信息化的迅速發展&#xff0c;企業與客戶、供應商等合作伙伴之間的文件交換也愈加頻繁&#xff0c;尤其涉及到核心數據&#xff0c;像核心技術、設計圖紙等敏感數據&#xff0c;對其的保護也是越發重視。文件外發系統&#xff0c;應運而生…

Linux基礎 - RAID 與 LVM 磁盤陣列技術

目錄 零. 簡介 一. RAID 二. LVM 三. 總結 零. 簡介 在 Linux 中&#xff0c;RAID&#xff08;Redundant Array of Independent Disks&#xff0c;獨立磁盤冗余陣列&#xff09;和 LVM&#xff08;Logical Volume Manager&#xff0c;邏輯卷管理器&#xff09;是兩種常用的…

機械繼電器、固態繼電器和模擬開關對比分析

1 結構 2 長期可靠性 與機械繼電器相比&#xff0c;光繼電器明顯提高了可靠性&#xff0c;因為沒有活動器件。 光繼電器通過 LED 進行光學控制。通常情況下&#xff0c;此 LED 會隨著時間的推移比開關本身更快地降級&#xff0c;具體取決于溫度、正向電流、開關速度等。隨著 LE…

群輝NAS使用Kodi影視墻

目錄 一、KODI安裝 二、修改UI語言 1、修改顯示字體 2、修改語言為中文 四、添加媒體庫 五、觀看電影 五、高級設置 1、視圖類型 2、修改點擊播動作 五、補充 1、文件組織結構及命名 2、電影信息的刮削 (1)添加影片 (2)演員管理 (3)影片管理 (4)說明 K…

【面試題】消息中間件

目錄 1.什么是消息中間件&#xff1f;它在分布式系統中的作用是什么&#xff1f;2.列舉并簡述幾種常見的消息隊列&#xff08;MQ&#xff09;產品&#xff0c;比如RabbitMQ, Kafka, ActiveMQ, RocketMQ等。3.描述一下點對點&#xff08;PTP&#xff09;和發布/訂閱&#xff08;…

基于opencv的圖像拼接

利用Python的OpenCV庫實現了簡單的圖像拼接&#xff0c;示例 1. 圖像拼接的基本原理 圖像拼接主要包括以下幾個步驟&#xff1a; 特征檢測與匹配&#xff1a;首先&#xff0c;需要在待拼接的圖像之間找到匹配的關鍵點或特征。OpenCV提供了如SIFT、SURF、ORB等特征提取器以及…

嵌入式EMC之TVS管

整理一些網上摘抄的筆記&#xff1a; TVS管認識&#xff1a; TVS的Vc要比&#xff0c;DCDC的最大承受電壓要小

Flexbox布局詳解

Flexbox布局詳解&#xff1a;現代CSS布局的利器 在現代Web開發中&#xff0c;布局是一個至關重要的部分。傳統的布局方式&#xff0c;如浮動和定位&#xff0c;雖然可以實現復雜的布局&#xff0c;但往往需要大量的CSS代碼&#xff0c;并且在維護和擴展時容易出現問題。Flexbo…

web前端大作業--美團外賣1

文章目錄 概述代碼截圖代碼鏈接 概述 web美團 登錄和注冊功能、頁面展示。 代碼 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><link rel"stylesheet" href&quo…