在前端挪动端开发中，可能会遇到如下问题：

页面下方有按钮或者图标的时候，咱们点击输入框，数字键盘就会将其上浮。

在键盘弹起时，页面高度变小，底部固定定位回升，所以咱们只须要在页面高度变小时，暗藏底部footer局部，当键盘隐没时再显示底部footer局部就能够解决问题了

  • 解决办法：检测浏览器的resize事件，当高度过小时就能够断定为呈现这种状况，这时把定位改成absolute或者间接暗藏掉之类的

我这边是通过自定义指令实现的

目录构造：

footer.ts中代码

const footer = {  inserted(el, binding, vnode) {    if (!el.windowHeight) el.windowHeight = document.documentElement.clientHeight    window.addEventListener('resize', () => {      let showHeight = document.documentElement.clientHeight      let windowHeight = el.windowHeight//默认屏幕高度      if (windowHeight > showHeight) {        el.style.display = 'none'      } else {        el.style.display = ''      }    })  }}export default footer

index.ts代码

import footer from './footer'export default {  install: function (Vue) {    Vue.directive('footer', footer)  }}
如果还有其余自定义的指令，间接在directives文件夹中新建文件写，在index文件中引入注册即可

main.ts中全局引入

import directives from '@/directives' // 指令Vue.use(directives)

页面中应用

在会上浮的元素上间接加上：v-footer 即可

<footer class="unite-footer"  v-footer>  <div @click="setInfo">    <img src="@/assets/ImgForm/circular.png">    <span>保留</span>  </div></footer>