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

这篇具有很好参考价值的文章主要介绍了【微信小程序】底部弹窗固定定位fixed+textarea，导致的adjust-position在安卓手机失效问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

对于底部弹出的组件我把它高度设置为正常高度+键盘高度，至于键盘高度则去监听键盘的弹出从而获取键盘高度,至于键盘高度变化这部分的动画效果用transition:all 100ms;文章来源地址https://www.toymoban.com/news/detail-802544.html

//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) 
      });
},

到了这里，关于【微信小程序】底部弹窗固定定位fixed+textarea，导致的adjust-position在安卓手机失效问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！