出现场景
垂直滑动一屏，滑到最后一屏有输入框就会导致一下现象
解决方式
1.软键盘关闭时 将滚动置0
window.scrollTo(0,0);
2 .在mounted里面 加入
document.body.addEventListener('focusout', () => { //软键盘关闭事件
window.scrollTo(0,0);
})
var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize=function(){
//键盘弹起与隐藏都会引起窗口的高度发生变化
var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
if(resizeHeight-0<originalHeight-0){
//当软键盘弹起，在此处操作
}else{
window.scrollTo(0,0);
//当软键盘收起，在此处操作
}
}
例子如下
<template>
<div>
<swiper :options="swiperOption" >
<swiper-slide style="background:#f3bf96;">
1
</swiper-slide>
<swiper-slide style="background:#fbe4c9;">
2
</swiper-slide>
<swiper-slide style="background:#b0cab2;">
3
</swiper-slide>
<swiper-slide style="background:#e1eac4;" class="P-text">
<div class="P-textCon">
<div>
<input type="text" placeholder="请输入"/>
</div>
<div>
<input type="text" placeholder="请输入"/>
</div>
<div>
<input type="text" placeholder="请输入"/>
</div><div>
<input type="text" placeholder="请输入"/>
</div>
<div>
<input type="text" placeholder="请输入"/>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components:{
swiper,
swiperSlide
},
data(){
return{
swiperOption:{
direction: 'vertical',
height: document.body.clientHeight
}
}
},
mounted() {
document.body.addEventListener('focusout', () => { //软键盘关闭事件
window.scrollTo(0,0);
})
var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize=function(){
//键盘弹起与隐藏都会引起窗口的高度发生变化
var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
if(resizeHeight-0<originalHeight-0){
//当软键盘弹起，在此处操作
}else{
window.scrollTo(0,0);
//当软键盘收起，在此处操作
}
}
}
}
</script>
<style>
.P-text{
display: flex;
align-items: center;
}
.P-textCon{
margin: 0 40px;
}
.P-text input{
width: 100%;
line-height: 40px;
border: 1px solid #586285;
padding: 0 20px;
margin-bottom: 10px;
box-sizing: border-box;
}
</style>
