【微信小程序】底部弹窗固定定位fixed+textarea,导致的adjust-position在安卓手机失效问题

安卓手机测试时候发现,fixed固定定位导致键盘弹出时,textarea无法正常被顶上去。

然后我就尝试了第二种方法用scroll-view将高度设置为100vh时,将页面保持在视口高度,这个时候发现不管是弹窗是fixed还是absolute都无法让安卓手机的键盘弹出时textarea顶上去

最后我用了最后一种办法,有需要可以看一下

对于底部弹出的组件我把它高度设置为正常高度+键盘高度,至于键盘高度则去监听键盘的弹出从而获取键盘高度,至于键盘高度变化这部分的动画效果用transition:all 100ms;

javascript 复制代码
//popup是我自己写的底部弹出组件,可以自己写一个
//keyboardHeight为键盘高度
<popup bindblanktap='tapMask' popHeight="{{426+keyboardHeight}}rpx" wx:if='{{showFloatInput}}' id='popup'>
     <view class="textarea">
     //adjust-position键盘弹起时,是否自动上推页面,将他设置为false
      <textarea show-confirm-bar='{{false}}' style="height: 160rpx;" focus="{{textarea_focus}}" class="" adjust-position="{{false}}" value="{{inputvalue}}" placeholder="{{placeholder}}" placeholder-style="color:#bbb; padding-top:10rpx" bindinput="onTextareaInput" bindkeyboardheightchange="bindkeyboardheightchange"></textarea>
    </view>
</popup>



//监听键盘
bindkeyboardheightchange: function (e) {
      var that = this;
      let keyboardHeight = e.detail.height;
      that.setData({
        keyboardHeight: (keyboardHeight * 750 / wx.getSystemInfoSync().windowWidth) 
      });
},
相关推荐
哲科软件3 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
汤姆yu3 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
jyan_敬言9 小时前
【C++】string类(二)相关接口介绍及其使用
android·开发语言·c++·青少年编程·visual studio
程序员老刘9 小时前
Android 16开发者全解读
android·flutter·客户端
福柯柯10 小时前
Android ContentProvider的使用
android·contenprovider
不想迷路的小男孩10 小时前
Android Studio 中Palette跟Component Tree面板消失怎么恢复正常
android·ide·android studio
餐桌上的王子10 小时前
Android 构建可管理生命周期的应用(一)
android
菠萝加点糖10 小时前
Android Camera2 + OpenGL离屏渲染示例
android·opengl·camera
用户20187928316711 小时前
🌟 童话:四大Context徽章诞生记
android
yzpyzp11 小时前
Android studio在点击运行按钮时执行过程中输出的compileDebugKotlin 这个任务是由gradle执行的吗
android·gradle·android studio