标签：技术 lob dia launch tee NPU close block height
在写字节小程序的时候，应业务要求用到了scroll-view来做滑动试图容器高度撑满整个屏幕用来锚点定位或者滚动到多少距离显示某些内容。但是如果用到了input就会有一些bug。例如：在屏幕下方的输入框聚焦的时候，弹出的键盘不把input顶到输入法上面，input被输入法挡住。又或者，弹框里的输入框聚焦时，input里的内容会被顶走，只有输入法关闭input才正常显示。
当input在在scroll-view容器里而且在屏幕下方的时候，点击输入框聚焦的时候，在安卓机上输入法弹出的时候不会把页面整体往上移，而是input还在原来的位置被输入法遮住。
根据字节官方技术人员回答：
比如scroll-view 高度不以 vh 为单位，或者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 } })
标签：技术 lob dia launch tee NPU close block height
原文地址：https://www.cnblogs.com/kongyijilafumi/p/13235932.html
