在全面屏状态下,当将 input 组件内嵌在 scroll-view 组件内时,此时点击 input 输入框,键盘弹出后其紧挨着的上方存在一处空白区域。
[upl-image-preview url=https://bbs.eeui.app/assets/files/2020-02-23/1582448716-56052-inked-20200223170314-li.jpeg]
样例代码:
<template>
<div class="app">
<!-- 页面内容 -->
<div class="cnt">
<scroll-view class="scroll-view">
<div class="form">
<input v-model="input" class="input" />
<input v-model="input" class="input" />
<input v-model="input" class="input" />
<input v-model="input" class="input" />
<input v-model="input" class="input" />
<input v-model="input" class="input" />
<input v-model="input" class="input" />
</div>
</scroll-view>
</div>
</div>
</template>
<style scoped>
.app {
background-color: yellowgreen;
border-width: 2px;
border-color: black;
}
.input {
height: 100px;
border-bottom-width: 1;
border-bottom-color: lightgray;
}
.cnt {
padding: 20px;
background-color: rgb(214, 240, 240);
height: 500px;
}
.scroll-view {
background-color: burlywood;
padding: 20;
flex: 1;
}
.form {
height: fit-content;
background-color: coral
}
</style>
<script>
export default {
data() {
return {
input: ""
};
},
mounted() {},
methods: {}
};
</script>
`