uniapp键盘收缩时没有动画效果怎么办

PHPz原创: 2023-04-18 15:43:5951浏览

随着移动设备的普及，移动应用市场的壮大，开发者们越来越多地开始学习使用跨平台框架来开发应用，其中Uniapp是一款备受欢迎的跨平台开发框架。Uniapp基于Vue.js开发，并提供了一系列插件和组件，方便开发者进行开发和调试。

然而，在开发Uniapp应用时，有些开发者发现了一个问题：在输入框获取焦点并弹出键盘后，键盘收缩时没有动画效果，特别是Android设备上更为明显。这个问题可能会影响用户的使用体验，下面介绍几种解决方法。

一、使用vue-router官方提供的transition

vue-router是Vue.js官方提供的路由管理工具，其提供了transition来实现路由过渡效果。在Uniapp中，我们可以使用vue-router中的transition来实现键盘收缩时的动画效果。

具体实现方法如下：

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

<template>
  <div id="app">
    <transition name="fade">
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  methods: {},
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

在需要实现动画效果的地方，比如一个弹出层中，在该组件的style标签中添加以下代码：

.slide-up-enter-active, .slide-up-leave-active {
  transition: all .3s cubic-bezier(.55,0,.1,1);
}
.slide-up-enter, .slide-up-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

以上代码中，

fade-enter-active：表示进入时的动画效果
fade-leave-active：表示离开时的动画效果
fade-enter：进入时的初始状态
fade-leave-to：离开时的最终状态

该方法的优点是使用简单，且可以自定义动画效果，但需要多次编写transition代码来使页面动画生效，可能存在代码冗余的问题。

二、调用系统API

我们可以使用uni-app提供的API来调用系统键盘的监听事件，从而实现键盘弹出、收缩时的动画效果。

实现方法如下：

在需要实现动画效果的页面，可以在onLoad或onShow生命周期中添加以下代码：

onLoad() {
  uni.onKeyboardHeightChange((res) => {
    if(res.height > 0){
      //键盘弹出时
      this.isShowKey = true;
      this.keyHeight = res.height;
    } else {
      //键盘收回时
      this.isShowKey = false;
    }
  });
},

以上代码中，uni.onKeyboardHeightChange方法可以在键盘高度发生变化时监听到，并触发回调函数。如果键盘的高度大于0，则判断为键盘弹出，此时给相应的DOM元素添加样式进行动画；如果键盘的高度为0，则判断为键盘收回，此时取消DOM元素的动画效果。

在相应的DOM元素的style标签中添加以下代码：

<input class="input" type="text" 
style="transform: translate3d(0, {{isShowKey ? -(keyHeight - 68)+'px' : '0'}}, 0);"
/>

以上代码中，

transform: translate3d()：表示改变元素的位置
isShowKey：表示键盘是否弹出，为true则表示弹出
keyHeight-68+'px'：表示键盘的高度减去屏幕底部操作栏的高度，再在原基础上向上平移
0：表示元素初始状态下的位置

该方法的优点是使用简单，无需引用第三方插件，但键盘收回时的动画效果可能不够流畅。

三、使用第三方插件

我们还可以使用一些第三方插件来达到动画效果的目的，比如uview-ui中的uni-transition组件等。

实现方法如下：

下载并引用uview-ui框架。
在需要实现动画效果的页面中，添加以下代码：

<uni-transition :name="'fade'">
  <div v-show="showContent" class="content">
    //...
  </div>
</uni-transition>

以上代码中，uni-transition组件可包裹需要添加动画效果的组件，通过:name属性来指定动画类型。v-show指令表示在需要时显示组件。

在style标签中添加以下代码：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

以上代码中：