解决方案在pages页面中使用禁止页面向上顶起设置fixed的bottom等于0即可app-plus: { softinputMode: adjustResize, }但由于我首页页面设置禁止顶起 页面显示会错乱原因是在键盘弹起时会导致 iOS 的 viewport 收缩进而触发页面重新计算滚动位置。所以我ios用的textarea的keyboardheightchangeview touchstart.stop touchmove.stop touchend.stop :style{ bottom:0px,zIndex:shareShow?10 !important: } classinputbox view :style{ background: offsetBottom0 ? #fff : #f5f6f9 } classinnerboxinput view classtextareabox textarea :style{ background: #f5f6f9 } :showConfirmBarfalse tap.stoponFocus :autoHeighttrue :adjustPositionfalse :maxlength500 :focusautoFocus :hold-keyboardtrue keyboardheightchangeonKeyBoardHeightChange bluronBlur focusonFocus :heightinputHeight v-modelcommentText :placeholderplaceholderText/textarea /view view v-showoffsetBottom ! 0 classsend-btn tap.stopsendComment :class{ send-active: commentText?.trim().length 0 } 发送 /view view v-ifoffsetBottom 0 classbottom-bar view classaction-btn taptoggleLike image v-ifisLiked src./imgs/liked.png stylewidth: 24px; height: 24px;margin-right: 5px; mode/image image v-else src./imgs/like.png stylewidth: 24px; height: 24px;margin-right: 5px; mode /image text classaction-count{{ details?.praiseNumber || 0 }}/text /view view stylemargin-left: 10px; classaction-btn taptoggleCollect image v-ifisCollected src./imgs/collected.png stylewidth: 24px; height: 24px;margin-right: 5px; mode /image image v-else src./imgs/collect.png stylewidth: 24px; height: 24px;margin-right: 5px; mode /image text classaction-count{{ details?.hiddenNumber || 0 }}/text /view view stylemargin-left: 10px; classaction-btn tap image src/static/imgs/rf-appcomment.png stylewidth: 24px; height: 24px;margin-right: 5px; mode /image text classaction-count{{ details?.commentNumber || 0 }}/text /view /view /view /viewconst onKeyBoardHeightChange (e) { offsetBottom.value e.detail.height 0 ? e.detail.height : 0; };使用keyboardheightchange又会导致部分手机 输入框距离键盘过远就用手动去改变softinputMode的值 ios等于adjustPan安卓等于adjustResize这个是vue3的方法import { getCurrentInstance, } from vue const { proxy } getCurrentInstance() const sys uni.getSystemInfoSync(); const appWebview proxy.$scope.$getAppWebview() console.log(appWebview,appWebview) appWebview.setStyle({ softinputMode: sys.platformios?adjustPan:adjustResize });vue2参考https://ask.dcloud.net.cn/question/113955
uniapp输入框fixed定位，导致页面顶起解决方案
解决方案在pages页面中使用禁止页面向上顶起设置fixed的bottom等于0即可app-plus: { softinputMode: adjustResize, }但由于我首页页面设置禁止顶起 页面显示会错乱原因是在键盘弹起时会导致 iOS 的 viewport 收缩进而触发页面重新计算滚动位置。所以我ios用的textarea的keyboardheightchangeview touchstart.stop touchmove.stop touchend.stop :style{ bottom:0px,zIndex:shareShow?10 !important: } classinputbox view :style{ background: offsetBottom0 ? #fff : #f5f6f9 } classinnerboxinput view classtextareabox textarea :style{ background: #f5f6f9 } :showConfirmBarfalse tap.stoponFocus :autoHeighttrue :adjustPositionfalse :maxlength500 :focusautoFocus :hold-keyboardtrue keyboardheightchangeonKeyBoardHeightChange bluronBlur focusonFocus :heightinputHeight v-modelcommentText :placeholderplaceholderText/textarea /view view v-showoffsetBottom ! 0 classsend-btn tap.stopsendComment :class{ send-active: commentText?.trim().length 0 } 发送 /view view v-ifoffsetBottom 0 classbottom-bar view classaction-btn taptoggleLike image v-ifisLiked src./imgs/liked.png stylewidth: 24px; height: 24px;margin-right: 5px; mode/image image v-else src./imgs/like.png stylewidth: 24px; height: 24px;margin-right: 5px; mode /image text classaction-count{{ details?.praiseNumber || 0 }}/text /view view stylemargin-left: 10px; classaction-btn taptoggleCollect image v-ifisCollected src./imgs/collected.png stylewidth: 24px; height: 24px;margin-right: 5px; mode /image image v-else src./imgs/collect.png stylewidth: 24px; height: 24px;margin-right: 5px; mode /image text classaction-count{{ details?.hiddenNumber || 0 }}/text /view view stylemargin-left: 10px; classaction-btn tap image src/static/imgs/rf-appcomment.png stylewidth: 24px; height: 24px;margin-right: 5px; mode /image text classaction-count{{ details?.commentNumber || 0 }}/text /view /view /view /viewconst onKeyBoardHeightChange (e) { offsetBottom.value e.detail.height 0 ? e.detail.height : 0; };使用keyboardheightchange又会导致部分手机 输入框距离键盘过远就用手动去改变softinputMode的值 ios等于adjustPan安卓等于adjustResize这个是vue3的方法import { getCurrentInstance, } from vue const { proxy } getCurrentInstance() const sys uni.getSystemInfoSync(); const appWebview proxy.$scope.$getAppWebview() console.log(appWebview,appWebview) appWebview.setStyle({ softinputMode: sys.platformios?adjustPan:adjustResize });vue2参考https://ask.dcloud.net.cn/question/113955
