微信小程序安卓系统下Input输入内容上移错位问题(键盘弹起页面未跟着上移,但输入框中的内容上移了才导致)的解决办法

1,015 阅读1分钟

1、问题引入(如图)

image.png

2、修复此bug经历的过程

  • adjust-position设置为truefalse均未解决。
  • 设置cursor-spacing后效果也不理想
  • 利用fixed定位demo看了貌似解决了。其实并没有。而且有明显卡顿(由于我这里是答题页面,涉及到很多题目,不适合)
  • type类型改成textarea基本可以解决。但是下面会介绍另外一种方法

3、解决方案

wxml文件

<scroll-view
  scroll-y="{{isScroll}}" 
  scroll-with-animation="true"
  style="height:100vh;overflow-y:auto;"
 >
  <view wx:if="{{currentQuestionList[idx].type == 3}}">
    <van-field
      value="{{ userAnswerList[(idx + (pageIndex - 1) * questionNum + 1)-1].answer }}"
      placeholder="请输入答案"
      border="{{ false }}"
      class="inputfield"
      data-index="{{(idx + (pageIndex - 1) * questionNum + 1)-1}}"
      bind:input="inputChange"
      bindfocus="onFocus"
      bindblur="onBlur"
    />
  </view>
</scroll-view>
js文件
Page({
 data: {
   isScroll: true // 页面是否可以滚动-控制最外层的 scroll-view
 },
 onFocus(e) {
  // 获取焦点时,页面禁止滚动
  this.setData({
    isScroll: false
  })
 },
 onBlur(e) {
  // 丢失焦点时,页面可滚动
  this.setData({
    isScroll: true
  })
 },
})