<template>
<div class="box" :style="{ height: heights + 'px' }">
<div class="content">
<input placeholder="请输入" @focus="focusFun" @blur="blurFun"/>
<div v-for="it in 100" :key="it">我是内容</div>
</div>
<div class="action"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 盒子高度
const heights = ref(window.innerHeight)
// 设置整体盒子高度 可视高度减去键盘高度
const focusFun = () => {
setTimeout(() => {
let keyBoardHeight = window.innerHeight - window.visualViewport.height;
heights.value = window.innerHeight - keyBoardHeight
window.scrollTo({
top: 0
})
}, 800);
}
// 失去焦点
const blurFun = () => {
heights.value = window.innerHeight
}
// 当手指从屏幕上离开的时候触发
const handleTouchEnd = () => {
window.scrollTo({
top: 0
})
}
// 滚动监听 使页面禁止滑动
const scrollFun = () => {
// window.scrollTo({
// top: 0
// })
}
onMounted(() => {
window.addEventListener('scroll', scrollFun)
window.addEventListener('touchend', handleTouchEnd);
})
</script>
<style>
html, body {
margin: 0;
padding: 0;
/* overflow: hidden; */
}
</style>
<style scoped>
.box {
width: 100%;
overflow: hidden;
height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.content {
flex: 1;
touch-action: auto;
overflow-y: scroll;
}
.action {
height: 40px;
background-color: red;
}
</style>
iOS的webview键盘问题
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 最近遇到一个键盘无法收起的问题，其实在这个项目期初就遇到了 ，因为现在开发的项目是类似于钉钉的办公类工具软件...
- 在iOS 11中，页面跳转到下一级的时候 在设置- (void)viewDidLoad或者是- (void)vi...
