uniapp底部不随输入法

1. 引言

在uniapp开发中，一些常见的需求是在页面底部添加一些常用的操作按钮，比如返回顶部、分享等。但是在用户输入的时候，输入法会弹出覆盖住底部，影响用户的体验。那么，如何解决这个问题呢？本文将重点介绍如何在uniapp中实现底部不随输入法而移动。

2. 实现原理

在介绍具体实现方法之前，先来了解一下实现的原理。当输入法弹出的时候，底部会被顶上去，这时候，可以通过监听输入法的弹出和收起来判断底部是否移动。

在uniapp中，可以通过监听uni.onKeyboardHeightChange事件，获取输入法的高度，然后根据输入法高度来判断底部是否需要上移。同时，在页面底部添加一个固定高度的view，然后让固定高度的view跟输入框之间的距离为输入法的高度，这样就可以实现底部不随输入法移动了。

3. 实现步骤

3.1 监听输入法的弹出和收起

在App.vue中添加以下代码：

onShow(options){
  // 监听键盘弹起事件
  uni.onKeyboardHeightChange((res) => {
    // 通过set方法将键盘高度存储到vuex中
    this.setKeyboardHeight(res.height);
  });
},
onHide(){
  // 取消监听键盘弹起事件
  uni.offKeyboardHeightChange();
}

这里通过onKeyboardHeightChange方法监听键盘弹起事件，然后将键盘高度存储到vuex中。在页面中，就可以通过vuex中的键盘高度来判断底部是否需要上移。

3.2 页面中添加底部view

在页面的底部添加一个固定高度的view，这里我们可以使用uniapp提供的fixed按钮组件，如下：

<template>
  <view>
    <view class="content">
      // 正文内容
    </view>
    <view class="fixed">
      <!-- 底部操作区域 -->
    </view>
  </view>
</template>
<style lang="scss">
.fixed {
  height: 100rpx; // 底部固定高度
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
</style>

这里设置底部区域的高度为100rpx，根据实际情况可以适当调整。

3.3 底部view与输入框之间的距离

在底部view和输入框之间添加一个高度为键盘高度的view，代码如下：

<template>
  <view>
    <view class="content">
      <!-- 正文内容 -->
      <input class="input-area" type="text" placeholder="请输入内容" />
      <view class="height-holder" :style="{ height: keyboardHeight + 'px' }"></view>
    </view>
    <view class="fixed">
      <!-- 底部操作区域 -->
    </view>
  </view>
</template>
<style lang="scss">
.height-holder {
  width: 100%;
}
.input-area {
  padding: 20rpx;
  width: 100%;
  border: none;
  outline: none;
}
.fixed {
  height: 100rpx; // 底部固定高度
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
</style>

在输入框下面添加了一个高度为键盘高度的view，样式为：

.height-holder {
  width: 100%;
}

4. 总结

通过对uniapp底部不随输入法的实现原理的了解，我们可以实现一个不随输入法移动的底部操作区域。主要通过监听输入法高度的变化来实现，同时在页面底部添加一个高度固定的view，在输入框下面再添加一个高度为键盘高度的view来实现。这样就可以为用户提供更好的体验。

本篇文章主要围绕uniapp底部不随输入法而移动展开，希望对各位读者有所帮助。