解决uniapp键盘弹起后顶部的导航栏往上顶的问题

第一步:需要在page.json中配置 "softinputMode": "adjustResize", //手机软键盘升起不让其将页面头部上推 如果所有页面都有键盘弹起的功能,可直接在 appPlus中配置,如果不是,直接在哪个页面需要配置哪个即可(建议),在appPlus中配置 "softinputMode": "adjustResize"后,有的页面没有键盘弹起的功能,会导致该页面不能滚动

        附 softinputMode 每个属性值的含义 

第二步:配置后,需要在顶部导航栏的位置添加固定定位.

.topsdingwei{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999999999; // 层级调整到最高
}

 第三步:添加固定定位后,会导致该元素脱标,下面的元素往上顶。 在顶部导航栏dom元素的同级 再添加一个dom元素 添加的dom元素的高和顶部导航栏的高保持一致即可

<view>
		<view class="topsdingwei">
		</view>
		<view :style="{'height':hearHeight+'px'}">
		</view>
</view>

 uniapp中获取dom元素的方法

const query = uni.createSelectorQuery().select('.topsdingwei')
query.boundingClientRect(data => {
    console.log('data', JSON.stringify(data))
    let height = data.height //data.height就是该元素的高度
}).exec();

uniapp中,可以通过以下几个步骤来添加顶部导航栏: 1. 在页面的顶部添加一个容器,作为导航栏的容器。可以使用flex布局来实现上下居中的效果。 2. 使用uniapp提供的状态栏组件来获取状态栏的高度。在h5、小程序和app原生中,状态栏的高度都是有效的。可以使用uniapp提供的api来获取状态栏的高度。 3. 使用uniapp提供的事件监听功能,监听导航栏按钮的点击事件。可以在事件中实现跳转到其他页面的逻辑。 4. 使用uniapp提供的胶囊组件来获取胶囊的位置信息。可以通过计算胶囊的位置信息和状态栏的高度来确定标题栏的高度。 综上所述,通过以上步骤,你可以在uniapp中实现顶部导航栏的添加。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [uniapp中自定义导航栏](https://blog.csdn.net/weixin_55010007/article/details/124854131)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp添加顶部导航栏并且使用iconfont图标](https://blog.csdn.net/weixin_44786530/article/details/125881544)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值