解决Uniapp沉浸式下,input或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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app中,textarea元素的@input事件不支持回车键。在手机端,没有键盘事件,所以不支持按键修饰符。如果你想实现在textarea中按下回车键触发事件的功能,可以使用@confirm事件。通过定义一个confirm-type属性为"search"的input元素,并在@confirm事件中执行你想要的操作,即可实现该功能。具体代码如下: ```html <textarea v-model="content" confirm-type="search" @confirm="doSomething"></textarea> ``` 其中,v-model指令用于双向绑定textarea的内容,confirm-type属性设置为"search",@confirm事件绑定一个方法doSomething,当用户在textarea中按下回车键时,会触发该方法。你可以在doSomething方法中编写你需要执行的代码。这样就能够在textarea中实现按下回车键触发事件的功能了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uniappinput 判断输入enter (@keyup.13失效)](https://blog.csdn.net/qq_41767945/article/details/119676040)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [uni-app单页开发@input 与@confirm 使用 仿淘宝搜索功能](https://blog.csdn.net/weixin_45923100/article/details/106797057)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [UNI-APP_uni-app input监听回车键](https://blog.csdn.net/weixin_44599931/article/details/111026382)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值