字节小程序关于在安卓机型下input聚焦时内容被撑走

Posted 2020-12-14 kongyijilafumi

关于字节小程序在安卓机型下某些情况input聚焦时内容被撑走

在写字节小程序的时候，应业务要求用到了scroll-view来做滑动试图容器高度撑满整个屏幕用来锚点定位或者滚动到多少距离显示某些内容。但是如果用到了input就会有一些bug。例如：在屏幕下方的输入框聚焦的时候，弹出的键盘不把input顶到输入法上面，input被输入法挡住。又或者，弹框里的输入框聚焦时，input里的内容会被顶走，只有输入法关闭input才正常显示。

举例：弹框里的输入框input

• 弹窗弹出，input正常显示

 

• 弹窗里的input聚焦的时候，输入的内容被撑开，不知道飘到哪里去了。

 

举例：在srcoll-view里面的正常位置的input

当input在在scroll-view容器里而且在屏幕下方的时候，点击输入框聚焦的时候，在安卓机上输入法弹出的时候不会把页面整体往上移，而是input还在原来的位置被输入法遮住。

• 输入框还没聚焦的时候正常显示

 

• 输入框聚焦，输入的时候，内容撑开。

 

• 输入框在屏幕底部时

 

• 输入框在底部点击输入时，input不会被顶到最上面。而是在原来的位置，输入法把input挡住。

 

解决方法

根据字节官方技术人员回答：比如scroll-view 高度不以 vh 为单位，或者scroll-view中再嵌套一个view 标签并设置vh 为单位

• 第一种：scroll-view高度不写成vh单位可以使input输入内容时正常，即scroll-view高度设置为px单位，在小程序应用启动的时候获取设备屏幕高度，来设置scroll-view。api：tt.getSystemInfoSync
• 第二种：scroll-view中再嵌套一个view 标签并设置vh 为单位 还没测试成功

//index.ttml 标签
<scroll-view class="contanier" style="height:{{height}}px;" scroll-y>
    <view>1</view>
    <view>2</view>
    <view>
        3
        <view class="btn" bindtap="show">
            点击我
        </view>
        <view>
            <input type="text" placeholder="输入文字" />
      
    </view>
    </view>

    </view>
    <view class="dialog" tt:if="{{isShow}}">
        <view class="wrap">
            <view class="title">测试</view>
            <view class="col">
        <input type="text" placeholder="输入名字" />
        <input type="number" placeholder="电话" />
      </view>
      <view>
        在这里安卓会有问题，但是苹果机不会出现这种情况！
      </view>
    <view class="close" bindtap="close"></view>
  </view>
</scroll-view>

//index.ttss 样式
.contanier>view{
  height: 100%;
}
.contanier>view:nth-child(1){
  background: red;
}
.contanier>view:nth-child(2){
  background: yellow;
}
.contanier>view:nth-child(3){
  background: aqua;
}
.contanier>view input{
  margin-top: 50rpx;
  border: 1px solid #e5e5e5;
  height: 80rpx;
}
.btn{
  padding: 20rpx 40rpx;
  background: #e5e5e5;
  border: 1px solid red;
}
.dialog {
    position  : fixed;
    left      : 0;
    height    : 100vh;
    right     : 0;
    top       : 0;
    bottom    : 0;
    z-index   : 99999;
    background: rgba(0, 0, 0, .8);
}
.dialog>view {
    margin        : 0 auto;
    top           : 50%;
    transform     : translateY(-50%);
    position      : relative;
    transition    : all .1s;
    padding-bottom: 100rpx;
}
.wrap{
  width: 680rpx;
  height: 400rpx;
  background: white;
  padding: 20rpx;
  box-sizing: border-box;
  text-align: center;
}

.dialog .close {
    position     : absolute;
    bottom       : -100rpx;
    left         : 50%;
    transform    : translateX(-50%);
    width        : 64rpx;
    height       : 64rpx;
    border       : 1px solid #fff;
    border-radius: 50%;
}

.dialog .close::before,
.dialog .close::after {
    position  : absolute;
    top       : 30rpx;
    left      : 17rpx;
    width     : 30rpx;
    height    : 1px;
    background: #fff;
    content   : ‘‘;
    transform : rotateZ(45deg);
}

.dialog .close::before {
    transform: rotateZ(-45deg);
}
.col{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.col input{
  padding-left:20rpx;
  box-sizing: border-box; 
  width: 45%;
  height: 80rpx;
  border: 1px solid #e5e5e5;
  font-size: 24rpx;
}

//index.js
const app = getApp()
Page({
  data: {
    isShow: false,
    height: app.globalData.globaHeight
  },
  show() {
    this.setData({
      isShow: true
    })
  },
  close() {
    this.setData({
      isShow: false
    })
  }
})

//app.js
App({
  globalData: {
    globaHeight: 0
  },
  onLaunch: function () {
    let systemInfo = tt.getSystemInfoSync();
    this.globalData.globaHeight = systemInfo.screenHeight
  }
})