解决方法:可以通过监听移动端软键盘弹起
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。
true,表示元素的顶部与当前区域的可见部分的顶部对齐
false,表示元素的底部与当前区域的可见部分的尾部对齐
Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。
data() {
let systemInfo = uni.getSystemInfoSync()
let navBarHeight = systemInfo.statusBarHeight + 44//头部导航栏高度
let scrollHeight = systemInfo.windowHeight - navBarHeight - uni.upx2px(92)//滚动区域高度
let otherHeight = navBarHeight + uni.upx2px(92)
return {
otherHeight,
scrollHeight,
}
}
window.addEventListener('resize', function() {
this.scrollHeight = window.innerHeight - this.otherHeight//当软键盘弹出的时候会把整个页面顶起,这时候整个窗体的高度是变小的,如果不重新计算滚动区域的高度的话,滚动区域是在窗口之外被遮挡的,所以这时候要重新计算页面滚动区域的高度
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {//滚动到当前元素的方法
window.setTimeout(function() {
if ('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView(false)
} else {
document.activeElement.scrollIntoViewIfNeeded(false)
}
}, 0)
}
})