解决Uniapp沉浸式下,input或textarea页面被顶起的问题
fixed属性:如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true。小技巧:通过view的动态高度设置,将textarea顶起,达到textarea被顶在软键盘上面的效果。adjust-position属性:键盘弹起时,是否自动上推页面。使用textarea(
·
设置沉浸式
"app-plus": {
"statusbar": {
//可选,字符串类型,沉浸式状态栏样式,可取值none、suggestedDevice、supportedDevice
"immersed": "none",
},
}
使用textarea(https://uniapp.dcloud.net.cn/component/textarea.html#)演示:
adjust-position属性:键盘弹起时,是否自动上推页面
fixed属性:如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true
小技巧:通过view的动态高度设置,将textarea顶起,达到textarea被顶在软键盘上面的效果
<template>
<!--设置页面不会被顶起 -->
<textarea :adjust-position="adjustPosition"></textarea>
<!--键盘弹出时增高,达到textarea被顶在软键盘上面的效果 -->
<view v-if="!adjustPosition" :style="[{ 'height':rjpHeight + 'px'}]"></view>
</template>
<script>
export default {
data() {
return {
isIndex: false,
rjpHeight:0,
adjustPosition: false,
}
},
mounted() {
uni.onKeyboardHeightChange(res => {
this.rjpHeight = res.height;
if (this.isIndex && res.height > 0) {//isIndex是指在首页有tab的情况,如果在其他页面可忽略
this.rjpHeight = res.height - 45; //45=app底部tab的高度
}
})
},
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)