vue 移动端弹出键盘导致页面fixed布局错乱 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


vue 移动端弹出键盘导致页面fixed布局错乱

2019-7-11 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

话不多说,直接上问题图片


这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面

网上搜到的解决方案有两种,

一种是监听页面高度(我采用的这种)

一种是监听软键盘事件(ios和安卓实现方式不同,未采用)

下面是实现代码

data() {
    return {
        docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
        showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
        hideshow:true  //显示或者隐藏footer
    }
  },
watch: {
        //监听显示高度
      showHeight:function() {
          if(this.docmHeight > this.showHeight){
            //隐藏
              this.hideshow=false
          }else{
            //显示
              this.hideshow=true
          }
      }
  },
mounted() {
      //监听事件
      window.onresize = ()=>{
          return(()=>{
              this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
      })()
      }
 
  },
<div class="bottom" v-show="hideshow">
    <div class="btn">
      确认操作
    </div>
  </div>
我这里使用的是方法是:当键盘弹出时,将按钮隐藏。如果必须出现按钮的话,可以修改按钮回归到正常的流中。
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: VUE 帝皇彩票官网移动端弹出键盘导致页面fixed布局错乱 « 产品设计之「取消按钮」的使用详解 | 细节分析 | 【Vue原理】Watch - 白话版»


蓝蓝 http://www.bjhbys.com

  1. 2020年1月(8)
  2. 2019年12月(28)
  3. 2019年11月(61)
  4. 帝皇彩票官网2019年10月(49)
  5. 2019年9月(48)
  6. 2019年8月(58)
  7. 2019年7月(58)
  8. 2019年6月(58)
  9. 2019年5月(31)
  10. 2019年4月(37)
  11. 2019年3月(43)
  12. 2019年2月(25)
  13. 2019年1月(45)
  14. 2018年12月(41)
  15. 2018年11月(40)
  16. 2018年10月(29)
  17. 2018年9月(40)
  18. 2018年8月(87)
  19. 2018年7月(107)
  20. 2018年6月(86)
  21. 2018年5月(110)
  22. 2018年4月(40)
  23. 2018年3月(35)
  24. 2017年8月(35)
  25. 2017年7月(45)
  26. 2017年6月(7)
  27. 帝皇彩票官网2017年5月(27)
  28. 2017年4月(51)
  29. 2017年3月(70)
  30. 帝皇彩票官网2017年2月(65)
  31. 2017年1月(69)
  32. 2016年12月(55)
  33. 2016年11月(111)
  34. 帝皇彩票官网2016年10月(92)
  35. 2016年9月(53)
  36. 2016年8月(9)
  37. 2016年7月(4)
  38. 2016年6月(9)
  39. 2016年3月(19)
  40. 2016年2月(26)
  41. 2016年1月(30)
  42. 2015年12月(33)
  43. 2015年11月(35)
  44. 2015年10月(46)
  45. 2015年9月(43)
  46. 帝皇彩票官网2015年8月(40)
  47. 2015年7月(33)
  48. 2015年6月(46)
  49. 2015年5月(58)
  50. 2015年4月(70)
  51. 帝皇彩票官网2015年3月(55)
  52. 2015年2月(17)
  53. 2015年1月(33)
  54. 2014年12月(21)
  55. 2014年11月(84)
  56. 2014年10月(94)
  57. 2014年9月(6)
  58. 2014年8月(1)
  59. 2014年7月(13)
  60. 2014年6月(66)
  61. 2014年5月(99)
  62. 2014年4月(88)
  63. 2014年3月(102)
  64. 2014年2月(68)
  65. 2014年1月(83)
  66. 2013年12月(106)
  67. 2013年11月(112)
  68. 2013年10月(61)
  69. 2013年9月(20)
  70. 2013年7月(13)
  71. 2013年6月(27)
  72. 2013年5月(48)
  73. 2013年4月(39)
  74. 2013年3月(8)
  75. 2013年2月(20)
  76. 2013年1月(31)
  77. 2012年12月(33)
  78. 2012年11月(31)
  79. 2012年10月(23)
  80. 2012年9月(8)
  81. 2012年7月(14)
  82. 2012年6月(15)
  83. 2012年5月(31)
  84. 2012年4月(24)
  85. 2012年2月(4)
  86. 2012年1月(8)
  87. 2011年12月(35)
  88. 2011年11月(32)
  89. 2011年10月(13)
  90. 2011年8月(1)
  91. 2011年6月(1)
订阅Rss
上海11选5 状元彩票计划 状元彩票计划 博发彩票APP下载 吉利彩票登陆 福建11选5开奖 迪士尼彩乐园 博发彩票APP下载 迪士尼彩乐园 状元彩票计划