当前位置:   article > 正文

苹果手机,点击文本框弹起软键盘,h5网页顶部header导航被顶起_保持ios导航在输入时也在页面最顶部

保持ios导航在输入时也在页面最顶部

最近使用vant和vue开发项目时,发现表单元素过多,点击靠近屏幕尾部的文本框,发现顶部导航栏header被顶起。

话不多说,先扫码体验下这个bug。请用苹果手机,微信扫码。

一、正常情况下,顶部导航栏固定在顶部

二、点击文本框,弹起软键盘时,顶部导航栏被顶上去了。

三、软键盘收回,顶部导航栏又返回到顶部位置

四、相关代码

  1. <template>
  2. <div class="home">
  3. <van-nav-bar
  4. title="顶部导航固定测试(苹果机)"
  5. left-arrow
  6. fixed
  7. />
  8. <van-form @submit="onSubmit" style="position: relative; top: 50px; left: 0; width: 100%;">
  9. <van-field
  10. v-model="username"
  11. name="用户名"
  12. label="用户名"
  13. placeholder="用户名"
  14. :rules="[{ required: true, message: '请填写用户名' }]"
  15. />
  16. <van-field
  17. v-model="password"
  18. type="password"
  19. name="密码"
  20. label="密码"
  21. placeholder="密码"
  22. :rules="[{ required: true, message: '请填写密码' }]"
  23. />
  24. <van-field
  25. v-model="username1"
  26. name="用户名1"
  27. label="用户名1"
  28. placeholder="用户名1"
  29. :rules="[{ required: true, message: '请填写用户名1' }]"
  30. />
  31. <van-field
  32. v-model="password1"
  33. type="password1"
  34. name="密码1"
  35. label="密码1"
  36. placeholder="密码1"
  37. :rules="[{ required: true, message: '请填写密码1' }]"
  38. />
  39. <van-field
  40. v-model="username2"
  41. name="用户名2"
  42. label="用户名2"
  43. placeholder="用户名2"
  44. :rules="[{ required: true, message: '请填写用户名2' }]"
  45. />
  46. <van-field
  47. v-model="password2"
  48. type="password2"
  49. name="密码2"
  50. label="密码2"
  51. placeholder="密码2"
  52. :rules="[{ required: true, message: '请填写密码2' }]"
  53. />
  54. <div style="margin: 16px;">
  55. <van-button round block type="info" native-type="submit">
  56. 提交
  57. </van-button>
  58. </div>
  59. </van-form>
  60. </div>
  61. </template>
  62. <script>
  63. // @ is an alias to /src
  64. export default {
  65. name: 'Home',
  66. components: {},
  67. data(){
  68. return {
  69. username: '',
  70. password: '',
  71. username1: '',
  72. password1: '',
  73. username2: '',
  74. password2: ''
  75. }
  76. },
  77. methods: {
  78. onSubmit(values) {
  79. console.log('submit', values);
  80. },
  81. }
  82. }
  83. </script>

大神们,有没有遇到这种问题,希望技术大牛们一起讨论下,如何解决这个问题。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/321426
推荐阅读
相关标签